Question

这让我疯狂，可悲的是哈哈。我无法弄清楚为什么我不能让我的表格中的“X”与表格的底部对齐...我已经尝试将垂直对齐放在CSS的不同位置，但无济于事:(我也正确使用桌子上的空白点吗？

以下是我的HTML和CSS文件的剪辑...非常感谢任何评论

<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;
}

Answer 1

您可以在position: relative和td上使用table，然后使用td将bottom: 0px移到底部。

但是，我认为本网站应该更清楚地回答您的问题：http://shouldiusetablesforlayout.com

Answer 2

那是因为td中有一个7px的底部填充。您可以将其更改为

padding:3px 2px 0 5px;

并且间距消失了。

http://jsfiddle.net/6AAvH/2/

Answer 3

使用HTML和CSS提供的垂直对齐似乎正如我所期望的那样工作。我在这里设置了一个关于jsfiddle的小测试http://jsfiddle.net/dttMd/。我在第一行中放置了一些换行符以确认以下文本是底部对齐。如果这不是你想要的，你可以澄清一下你需要的是什么。

至于空单元格，你所做的是错误的，因为元素需要有一个结束标记。我个人的偏好只是将 放入细胞中。我认为不一定有一种“正确”的方式（尽管我很乐意纠正）。

Answer 4

填充可能会影响布局和高度/宽度。摆脱td的填充，然后给它一个高度。

有时行高可能会使其看起来没有与顶部或底部对齐。如果您的字体大小小于其容器，则可能是继承行高。如果您将行高设置为字体大小（或仅line-height: 1）并为td设置一个高度，那么应该可以解决问题。

<td height="18" valign="bottom" style="font-size:9px; line-height:9px;">TEXT</td>

您的错过了结束，并且您不应该使用跨度来占用空间，因为它是内联元素。对于表格，您甚至不需要占位符，但如果您更舒服，可以使用 ，或者如果您希望它继承某种填充/边距样式，则可以使用该元素（{ {1}}或 ）。

Answer 5

您只需在每个valign="bottom"中添加td，这样就可以让内容在底部对齐，并得到世界上每个浏览器的支持！

希望这会对你有所帮助。

为什么“Vertical-align：bottom”不在此表上工作

5 个答案: