在HTML中设置表格内边框

Question

如何设置“内边框”——不同单元格之间的边框。

通过设置样式属性，我可以控制外边框，但是内边框仍然保持相同的灰色和相同的宽度。我应该调整哪些属性来控制内边框？

- ripper234

Answer 1

对于普通的表格标记，以下是一个简短的解决方案，在 BrowserStack 上适用于所有设备/浏览器，除了 IE 7 及以下版本:

table { border-collapse: collapse; }

td + td,
th + th { border-left: 1px solid; }
tr + tr { border-top: 1px solid; }

为了支持IE 7，请添加以下内容：

tr + tr > td,
tr + tr > th { border-top: 1px solid; }

这里可以看到一个测试用例：http://codepen.io/dalgard/pen/wmcdE

- dalgard

---

这是一段非常优秀的代码。我很感激它的简洁性。 - Kristopher

如果例如最后一行只收到一个 td，该如何修复此布局问题？ - Alejandro

Answer 2

你需要为 <td> 元素设置样式。

可以参考 W3C 网站。

- daLizard