HTML CSS examples for CSS Widget:Table Cell
position a div at the bottom of a table cell
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> .tableClass {<!--from w w w . jav a 2s . c o m--> width:951px; table-layout:auto; margin-top:9px; border-color:Chartreuse; border-width:0 0 2px 2px; border-style:solid; border-spacing:0; } .tableClass td { border-color:yellow; border-width:2px 2px 0 0; border-style:solid; margin:0; padding:5px; vertical-align:text-top; height:0px; } .tableClass div:only-of-type { height:100%; background-color:blue; display:flex; flex-flow:column wrap; justify-content:space-between; } </style> </head> <body> <table class="tableClass"> <tbody> <tr> <td> <div> <div class="label"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ullamcorper molestie lacus sed fermentum. Aliqua <br> <br> </div> <div class="content"> Lorem ip </div> </div> </td> <td> <div> <div class="label"> Lorem ipsum </div> <div class="content"> Lorem ip </div> </div> </td> <td> <div> <div class="label"> Lorem i </div> <div class="content"> Lorem ip </div> </div> </td> <td> <div> <div class="label"> Lorem ipsum dolor </div> <div class="content"> Lorem ip </div> </div> </td> <td> <div> <div> Lorem ipsum dolor sit amet, </div> <div class="content"> Lorem ip </div> </div> </td> </tr> <tr> <td> <div> Lorem ipsum d </div> <div class="content"> Lorem ip </div> </td> <td> <div class="label"> Lorem ipsum dolor sit amet, consectetur adipis </div> <div class="content"> Lorem ip </div> </td> <td> <div> Lorem ipsum dolor s </div> <div class="content"> Lorem ip </div> </td> <td> <div> Lorem ipsum </div> <div class="content"> Lorem ip </div> </td> <td> <div> Lorem ipsum dolor sit amet, consectet </div> <div class="content"> Lorem ip </div> </td> </tr> </tbody> </table> </body> </html>