1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2 <html>
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="flags" content="">
9 <meta name="assert" content="Vertical alignment of cell contents does not increase the height of cells in the row if there is already enough room.">
10 <style type="text/css">
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>