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

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

是的，我知道内容和样式的分离是丑陋和令人憎恶的，但添加spacer（不可见）列似乎是唯一能够在所有平台上一致工作的东西。

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

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