html - Why isn't 'Vertical-align:bottom' working on this table -
this has been driving me crazy, sadly haha. can't figure out why can't make "x's" in table align bottom of table... i've tried putting vertical-align in different places in css, no avail :(. using correctly blank spots in table?
here snips of both html , css files...any comments appreciated
<html> <head> <title>day4: table king</title> <link rel="stylesheet" type="text/css" href="stylesday4.css" /> </head> <body> <table id="products"> <tr> <th><span></th> <th>free version</th> <th>lite version</th> <th>full version</th> </tr> <tr> <td>advertising</td> <td id="td">x</td> <td><span></td> <td><span></td> </tr> <tr class="alt"> <td>catering software</td> <td><span></td> <td id="td">x</td> <td id="td">x</td> </tr>
....
#products { border-collapse:collapse; width:100%; } #products th, #products td { border:1px solid #0000ff; background-color:#c0c0c0; padding:3px 2px 7px 5px; } #products th { font-size:20px; font-family:"trebuchet ms", arial, helvetica, sans-serif; color:#0000ff; padding-top:4px; padding-bottom:5px; background-color:green; } #products td { vertical-align:bottom; } #products tr { text-align:center; color:#0000ff; } #products tr.alt td { color:blue; background-color:#a7c942; }
with html , css have provided vertical aligning seems working i'd expect. set little test on jsfiddle here http://jsfiddle.net/dttmd/ . put line breaks in first row confirm following text bottom aligning. if isn't after clarify need.
as empty cells, doing wrong since <span>
elements need have closing tag. personal preference put in
cells. don't think there "right" way though (though happy corrected).
Comments
Post a Comment