Question

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

<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，但是每次我向cell或div添加margin或padding时，MyCity，Store Title都会跟踪描述。我只想让描述更低。

Answer 1

这就是html表的工作原理。如果您希望一个单元格连续低于其余单元格，则可能需要尝试使用rowspan。

你能提供你想要的和你得到的图像。

查看表格中的内容，为什么不使用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>

Answer 2

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

table td {
    vertical-align: top;
}

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

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

2 个答案: