Question

我最近发现我需要在表格中使用cellspacing属性，但我想知道是否可以让它只能水平工作。我不希望它垂直展开，这会弄乱整个页面的布局。

Answer 1

比设置cellspacing="10"更好的方法是使用CSS。您可以使用以下CSS来定位表的单元格间距。

table {
  border-spacing: 10px 0;
}

第一个值指定水平间距，第二个值指定垂直间距。

Answer 2

如果您只需要将单元格内容分开，请在单元格内使用间距（并在HTML中设置cellspacing=0）。这一点得到了支持CSS的浏览器的普遍支持。

如果你真的需要将单元格本身分开，以便它们的边框或彩色背景之间有间距，那么border-spacing可以解决问题，但仅限于支持浏览器。

根据上下文，您甚至可以考虑通过将单元格内容放在div中来设置模拟单元格间距，设置为覆盖除了所需填充之外的单元格区域，这将看起来像单元格间距。然后，您可以在div元素上设置任何所需的边框或背景。

Answer 3

是的，我知道将内容和样式分开是很丑陋和可憎的，但是添加间隔（不可见）列似乎是唯一可在所有平台上一致使用的东西。

在这里，我将一些空表数据放在第一行，并给它们一个宽度（以像素为单位）。我在连续的行中制作了相应的空表数据。感觉像是真正的老派，但是它很简单而且有效。

<table>
    <tr>
        <td>some content for column 1</td>
        <td width="18" />
        <td>other content for 2nd visible column (actually column 3)</td>
        <td width="18" />
        <td>content for 3rd visible column (actually column 5)</td>
    </tr>

    <tr>
        <td><img src="image_for_column 1.png" /></td>
        <td />
        <td><img src="image_for_column 2.png" /></td>
        <td />
        <td><img src="image_for_column 3.png" /></td>
    </tr>

</table>

如何仅将水平单元格间距应用于HTML表格？

3 个答案: