table-cell-block-overflow.html (919B)
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>Test table-cell content overflowing in the block direction for each 6 vertical-align value</title> 7 <link rel="author" title="Kyle Zentner" href="mailto:zentner.kyle@gmail.com"> 8 <style> 9 td { 10 border: 20px solid teal; 11 height: 100%; 12 } 13 table { 14 height: 100px; 15 } 16 .content { 17 padding: 20px; 18 height: 100%; 19 width: 20px; 20 background: purple; 21 } 22 </style> 23 </head> 24 <body> 25 <table> 26 <tr> 27 <td style="vertical-align: middle"> 28 <div class="content"></div> 29 </td> 30 <td style="vertical-align: baseline"> 31 <div class="content"></div> 32 </td> 33 <td style="vertical-align: bottom"> 34 <div class="content"></div> 35 </td> 36 <td style="vertical-align: top"> 37 <div class="content"></div> 38 </td> 39 </tr> 40 </table> 41 </body> 42 </html>