表格行，当向一个单元格添加填充时，整行被推下答案

【问题标题】：Table Row, when add padding to one cell the whole row gets pushed down表格行，当向一个单元格添加填充时，整行被推下
【发布时间】：2011-03-18 00:28:46
【问题描述】：

我有一个表，有一些行和列，这里是第二行的例子

<tr>
    <td valign="top" style="width: 150px;">
        <h5>MyCity</h5>
    </td>
    <td valign="top" style="width: 360px;">
        <h5 class="store_title">Store Title</h5>
        <p>address</p>
    </td>
    <td class="storeDescriptionCell"><div>Description
    </div>
    </td>
</tr>

我在我的 CSS 中添加了 storeDescriptionCell

td.storeDescriptionCell{
padding:20px;
}

我什至尝试使用 div，但每次我向单元格或 div 添加边距或填充时，MyCity、Store Title 都会随着描述而下降。我只是希望描述降低。

【问题讨论】：

标签： html css html-table padding

【解决方案1】：

这就是 html 表格的工作方式。如果您希望一个单元格低于一行中的其他单元格，您可能需要尝试使用行跨度。

你能提供一张你想要什么和你得到什么的图片吗？

查看表格中您想要的内容，为什么不使用 th 作为列标题。

<table>
  <tr>
    <th>My City</th>
    <th>Store Name</th>
    <th>&nbsp;</th>
  </tr>
  <tr>
    <td>content</td>
    <td>$content</td>
    <td>$content</td>
  </tr>
</table>

【讨论】：

我知道表格是如何工作的，问题是由于许多原因我在 $left 和 $right 变量中收集第二行和第三行的所有数据，所以当我到达单元格时，我只是做一个 echo "$left" 和 echo "$right" ，我要重写很多东西。

【解决方案2】：

您可以使用以下 CSS 将所有 <td> 单元格设置为垂直对齐顶部，并将商店描述设置为垂直对齐底部：

table td {
    vertical-align: top;
}

table td.storeDescriptionCell {
    vertical-align: bottom;
}

【讨论】：