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

Question

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

Answer 1

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

table {
  border-spacing: 10px 0;
}

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

Answer 2

如果您只需要将单元格 contents 分开，请在单元格内使用间距（并在 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>