表格单元格之间的空间答案

【问题标题】：Space Between Table Cell表格单元格之间的空间
【发布时间】：2014-06-13 14:46:41
【问题描述】：

能否请您看一下this Demo，让我知道为什么表格中的单元格之间有线条而没有设置边框？

<table style="width:300px">
    <tr>
        <td>Jill</td>
        <td>Smith</td>
        <td>50</td>
    </tr>
    <tr>
        <td>Eve</td>
        <td>Jackson</td>
        <td>94</td>
    </tr>
    <tr>
        <td>Eve</td>
        <td>Jackson</td>
        <td>94</td>
    </tr>
</table>

【问题讨论】：

默认情况下有一个“边框设置”。这就是为什么你应该在table 标签中使用cellspacing=0。
可能重复 - stackoverflow.com/questions/21108708/…

标签： html css

【解决方案1】：

你可以添加

table{
    border-collapse:collapse;
}

折叠边框

Fiddle

【讨论】：

【解决方案2】：

默认浏览器样式在表格单元格标签上添加一个像素的填充。

为避免默认浏览器 css，您可以使用 http://meyerweb.com/eric/tools/css/reset/ 之类的 css 文件

您还可以使用表格标签上的border-spacing 或border-collapse 属性删除表格中的所有边框。

table {
    border-spacing: 0;
}

或

table {
    border-collapse: 0;
}

【讨论】：

默认填充专门针对表格单元格，而不是一般的“标签”。 “CSS 重置”充其量是一种生硬的工具，最坏的情况是造成混乱。

【解决方案3】：

用途：

<table style="width:300px" cellspacing="0">

fiddle

【讨论】：

我不是反对它的人，但通常认为最好的做法是将与视图相关的内容放在 HTML 之外并将其存储在 CSS 中，以便 HTML 仅充当一种分层容器.在您的情况下，cellspacing="0" 与视图相关，可以更改为 border-spacing: 0。

【解决方案4】：

线条是由单元格之间的间距引起的。它是空白空间，这意味着通常桌子的背景（这里是绿色）会透光。这种间距通常被描述为“边框间距”，因为它可以被视为逻辑边框之间的间距。如果没有设置边界，就像这里一样，边界在逻辑上仍然存在，尽管宽度为零。对于两个相邻的单元格，我们因此有设置

...[cell1 内容] [右内边距] [右边框] [边框间距] [cell2 左边框] [cell1 左内边距] [cell1 内容]...

因此，虽然它可能看起来像一个边框，但它实际上是（不可见的）边框之间的间距。

有几种方法可以删除它：

在table 元素上使用HTML 属性cellspacing=0。所有正常呈现表格的浏览器都支持这一点。名义上，该属性在 HTML 4 中已弃用，在 HTML5 中已过时且不符合标准，但仍希望浏览器继续支持它。
使用table { border-spacing: 0 }，对应于HTML属性。浏览器支持很好，但仍然比其他方法更受限制。此方法允许您为 rows 之间的边框设置非零边框间距，例如table {border-spacing: 0 2px}。
使用table { border-collapse: collapse }，有很好的浏览器支持。它会导致使用折叠边界模型，并可能产生副作用。它使相邻单元格的边框（可能是虚拟的零宽度边框）重合，因此它们之间不能有任何边框间距。

【讨论】：