fixed-table-layout-002a.xht (3429B)
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 2 3 <html xmlns="http://www.w3.org/1999/xhtml"> 4 5 <head> 6 7 <title>CSS Test: table-layout: fixed - specified column width must include padding and border applied on its cells</title> 8 9 <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> 10 <link rel="bookmark" href="http://lists.w3.org/Archives/Public/www-style/2011Apr/0743.html" title="[css21] Section 17.5.2.1 should be clarified" /> 11 <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#fixed-table-layout" title= 12 "Section 17.5.2.1 Fixed table layout" /> 13 <link rel="match" href="fixed-table-layout-002a-ref.xht" /> 14 15 <meta content="image" name="flags" /> 16 <meta content="In the fixed table layout algorithm, the horizontal layout of the table only depends on the table's width, the width of the columns, table borders and any non-zero horizontal border-spacing if 'border-collapse: separate' applies to such table, like in this test. The specified width of columns must include the non-zero horizontal padding and/or non-zero horizontal borders which may be applying to the cells contained in such columns." name="assert" /> 17 18 <style type="text/css"><![CDATA[ 19 body 20 { 21 font: 1em/1.25 serif; 22 margin: 8px; 23 } 24 25 strong {line-height: 1;} 26 27 table 28 { 29 border-collapse: separate; 30 border-left: white solid 23px; 31 border-right: white solid 34px; 32 border-spacing: 19px 0px; 33 color: white; 34 height: 100px; 35 table-layout: fixed; 36 width: 758px; 37 } 38 39 col#first-column {width: 382px;} 40 41 col#second-column {width: 262px;} 42 43 td {padding: 0px 127px;} 44 45 td#FirstTestedCell {border-right: lime solid 1px;} 46 47 /* 48 Width of table 49 50 From left to right 51 ------------------ 52 53 23px (left border of table) 54 + 55 19px (left-most border-spacing) 56 + 57 382px (specified width of first column) 58 + 59 19px (border-spacing separating the 2 cells) 60 + 61 262px (specified width of second column) 62 + 63 19px (right-most border-spacing) 64 + 65 34px (right border of table) 66 ======== 67 758px 68 69 So, here, the specified width of the table is not greater 70 than the sum of the column widths (plus cell spacing or borders). 71 So, the table's width in 'border-collapse: separate' remains as specified. 72 73 The col#first-column specified width of 382px should include 74 the horizontal padding of 127px and the solid lime 1px border-right. 75 76 So, such 1px solid lime border-right should appear at 77 23px (left border of table) 78 + 79 19px (left-most border-spacing) 80 + 81 382px (specified width of first column) 82 ======== 83 424px inside document body's content box. 84 */ 85 86 div#reference {margin-left: 23px;} 87 ]]></style> 88 89 </head> 90 91 <body> 92 93 <p>Test passes if there is a thin green vertical line <strong>at exactly 400px</strong>.</p> 94 95 <table> 96 97 <caption>caption</caption> 98 99 <col id="first-column" /> 100 <col id="second-column" /> 101 102 <tr> 103 <td id="FirstTestedCell">first cell here</td> 104 105 <td>second cell here</td> 106 </tr> 107 108 </table> 109 110 <div id="reference"><img src="support/ruler-h-200px-400px.png" width="700" height="18" alt="FAIL: Image download support must be enabled" /></div> 111 112 <!-- 113 Nota bene: the presence of the caption element in the test 114 is absolutely necesssary to this test. It may seem to be 115 an extraneous element but it is not. 116 --> 117 118 </body> 119 </html>