table-anonymous-block-014.xht (2447B)
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title>CSS Test: The anonymous box around a table as an 'inline-block' box</title> 5 <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> 6 <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#model" /> 7 <meta name="assert" content="The anonymous box around a table is an 'inline-block' box if the table is inline-level." /> 8 <style type="text/css"> 9 #table 10 { 11 display: inline-table; 12 background: orange; 13 color: orange; 14 } 15 #div1 16 { 17 color: silver; 18 } 19 #caption 20 { 21 display: table-caption; 22 color: blue; 23 background: blue; 24 } 25 #tr 26 { 27 display: table-row; 28 } 29 #td 30 { 31 display: table-cell; 32 } 33 </style> 34 </head> 35 <body> 36 <p>Test passes if the blue box is stacked on top of the orange box, the boxes do not take up the whole width of the page, and "Filler Text" flows to the left and right of the orange bar.</p> 37 <div id="div1">Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text 38 Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text 39 Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text 40 <div id="table"> 41 <div id="caption">Filler TextFiller Text</div> 42 <div id="tr"> 43 <div id="td">Filler TextFiller Text</div> 44 </div> 45 </div> 46 Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text 47 Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text 48 Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text 49 Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text 50 </div> 51 </body> 52 </html>