Why isn't 'Vertical-align:bottom' working on this table
This has been driving me crazy, sadly haha. I can't figure out why I can't make the "X's" in my table align with the bottom of the table... I've tried putting vertical-align in different places in the CSS, but to no avail :(. Also am I using correctly for blank spots in my table?
Here are snips of both my HTML and CSS files...any comments would be greatly 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;
}
You could use position: relative on your td and table, then move the td to the bottom by using bottom: 0px.
However, I think this website should answer your question a bit more clearly: http://shouldiusetablesforlayout.com
With the HTML and CSS you have provided the vertical aligning seems to be working as I'd expect. I set up a little test on jsfiddle here http://jsfiddle.net/dttMd/ . I put some line breaks in the first row to confirm that the following text was bottom aligning. If this isn't what you are after could you clarify what exactly it is that you need.
As for the empty cells, what you are doing is wrong since <span> elements need to have a closing tag. My personal preference is just to put in a into the cells. I don't think there really is a "right" way though necessarily (though I am happy to be corrected).
that's because you have a 7px bottom padding in the td. You can change it to
padding:3px 2px 0 5px;
and the spacing is gone.
http://jsfiddle.net/6AAvH/2/
Padding can mess with layout and height/width. Get rid of the padding from your td and give it a height instead.
Sometimes line height can make it seem like it's not aligning to the top or bottom. If your font size is less than its container, it might be inheriting the line height. If you set the line height to the font size (or just line-height: 1) and give the td a height, that should do the trick.
<td height="18" valign="bottom" style="font-size:9px; line-height:9px;">TEXT</td>
Your <span> is missing the closing </span>, and you shouldn't be using a span to take up space since it is an inline element. For tables, you shouldn't even need a placeholder, but if you are more comfortable you can use or if you want it to inherit some kind of padding/margin style, you can use that element (<p> </p> or <h3> </h3>).
You can just simply add valign="bottom" in every td and this will make content to be aligned at the bottom and is supported by every browser in the world!
Hope this would help you.
加载中,请稍侯......
精彩评论