table-valign-001.xht (1761B)
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: Table Cell Vertical Alignment Affect on Specified Height</title> 5 <link rel="author" title="Bruno Fassino" href="fassino[at]gmail.com"/> 6 <link rel="alternate" href="http://www.brunildo.org/test/td_height1.html"/> 7 <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#height-layout"/> 8 <meta name="assert" content="Vertical alignment of cell contents does not 9 increase the height of cells in the row if there is already enough room."/> 10 <style type="text/css"><![CDATA[ 11 .container { 12 background: red; 13 float: left; /* shrinkwrap width and height */ 14 } 15 .control { 16 width: 10px; 17 height: 100px; 18 background: blue; 19 } 20 table, .control { 21 font-size: 20px; 22 float: left; 23 border-spacing: 0; 24 } 25 td { 26 background: blue; 27 color: blue; 28 padding: 0; 29 } 30 31 .middle td { vertical-align: middle; } 32 .baseline td { vertical-align: baseline; } 33 .one { height: 100px; } 34 .two { font-size: 2em; } 35 ]]></style> 36 </head> 37 <body> 38 <p>There must be a blue box below and no red.</p> 39 <div class="container"> 40 <div class="control"></div> 41 <table class="middle"><tr> 42 <td class="one">A</td> 43 <td>B</td> 44 </tr></table> 45 46 <table class="middle"><tr> 47 <td class="one">A</td> 48 <td class="two">B</td> 49 </tr></table> 50 51 <table class="baseline"><tr> 52 <td class="one">A</td> 53 <td>B</td> 54 </tr></table> 55 56 <table class="baseline"><tr> 57 <td class="one">A</td> 58 <td class="two">B</td> 59 </tr></table> 60 </div> 61 </body> 62 </html>