Question

请你看看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>

Answer 1

您可以添加

table{
    border-collapse:collapse;
}

折叠边框

Fiddle

Answer 2

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

要避免使用默认浏览器css，您可以使用http://meyerweb.com/eric/tools/css/reset/

等css文件

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

table {
    border-spacing: 0;
}

或

table {
    border-collapse: 0;
}

Answer 3

使用：

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

fiddle

Answer 4

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

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

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

有几种方法可以删除它：

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

表格单元格之间的空间

4 个答案: