如何仅在表格内应用边框？

Question

我想弄清楚如何只在表格内添加边框。当我做：

 table {
    border: 0;
}
table td, table th {
    border: 1px solid black;
}

边框围绕整个表格，也在表格单元格之间。我想要实现的是仅在表格内部围绕表格单元格设置边框（表格周围没有外边框）。

这是我用于表格的标记（尽管我认为这并不重要）：

 <table>
    <tr>
        <th>Heading 1</th>
        <th>Heading 2</th>
    </tr>
    <tr>
        <td>Cell (1,1)</td>
        <td>Cell (1,2)</td>
    </tr>
    <tr>
        <td>Cell (2,1)</td>
        <td>Cell (2,2)</td>
    </tr>
    <tr>
        <td>Cell (3,1)</td>
        <td>Cell (3,2)</td>
    </tr>
</table>

以下是我应用于大部分表格的一些基本样式：

 table {
    border-collapse: collapse;
    border-spacing: 0;
}

原文由 Richard Knop 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

如果你正在做我相信你正在尝试做的事情，你将需要更多这样的东西：

 table {
  border-collapse: collapse;
}
table td, table th {
  border: 1px solid black;
}
table tr:first-child th {
  border-top: 0;
}
table tr:last-child td {
  border-bottom: 0;
}
table tr td:first-child,
table tr th:first-child {
  border-left: 0;
}
table tr td:last-child,
table tr th:last-child {
  border-right: 0;
}

jsFiddle 演示

问题是您在所有单元格周围设置了“完整边框”，这使它看起来好像整个表格周围都有边框。

干杯。

编辑：关于这些伪类的更多信息可以在 quirksmode 上找到，并且正如预期的那样，您在 IE 支持方面几乎是 SOL。

原文由 theIV 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

这对我有用：

 table {
    border-collapse: collapse;
    border-style: hidden;
}

table td, table th {
    border: 1px solid black;
}

查看示例…

在 FF 3.6 和 Chromium 5.0 中测试，IE 缺乏支持；来自 W3C ：

具有“隐藏”“边框样式”的边框优先于所有其他冲突边框。具有此值的任何边框都会抑制此位置的所有边框。

原文由 anthonyrisinger 发布，翻译遵循 CC BY-SA 3.0 许可协议