height-table-cell-001.xht (1827B)
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: height - table cell height</title> 8 9 <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> 10 <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#height-layout" title="17.5.3 Table height algorithms" /> 11 <link rel="match" href="../reference/ref-filled-green-100px-square.xht" /> 12 13 <meta content="The height of a 'table-row' element's box is the maximum of the row's computed 'height', the computed 'height' of each cell in such row and the minimum height required by the content of the cells. The height of a cell is the maximum between its specified 'height' and the minimum height required by its content." name="assert" /> 14 15 <style type="text/css"><![CDATA[ 16 div#overlapped-red-reference 17 { 18 background-color: red; 19 height: 100px; 20 position: absolute; 21 width: 100px; 22 z-index: -1; 23 } 24 25 table#overlapping-green-test {border-spacing: 0px;} 26 27 td 28 { 29 background-color: green; 30 border: green solid 10px; 31 height: 50px; 32 padding: 15px; 33 width: 50px; 34 } 35 ]]></style> 36 37 </head> 38 39 <body> 40 41 <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> 42 43 <div id="overlapped-red-reference"></div> 44 45 <table id="overlapping-green-test"> 46 <tr> 47 <td></td> 48 </tr> 49 </table> 50 51 <!-- 52 In this testcase, the content of the unique cell is empty; therefore the 53 minimum height required by the cell content is 0. So, the height of such 54 single cell is given by 55 max(specified 'height', minimum height required by its content) == 50px 56 Such height refers to the cell's content box, not to the cell's border box. 57 --> 58 59 </body> 60 </html>