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

Question

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

Answer 1

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

table {
  border-spacing: 10px 0;
}

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

Answer 2

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

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

根据上下文，您甚至可以考虑通过将单元格内容放入 a 中来模拟单元格间距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>