Question

如何创建一个没有外边框但只有内边框的表格。像this one之类的东西（见页面右下角）。我知道我可以像他们一样手动创建它，我的意思是给每个td上课，但是没有更好的方法来实现它吗？

Answer 1

不，他们没有这样做，它以一种很好的方式完成！：）

这将从单元格中删除右边框：

.sidebar-stats td:last-child, .sidebar-stats th:last-child {
    border-right: 0 none;
}

（以同样的方式，您可以删除最后一行的底部边框。您可以使用Firebug来分析他们的CSS，帮助很多！）

Answer 2

这是一个可以在所有浏览器中使用的解决方案，但是要求您在表格的最右侧和底部<td>添加一个CSS类（相比之下，必须为每个{{1}提供一个类}}）

<td>

JSFiddle：http://jsfiddle.net/HS4nQ/3/

Answer 3

您可以将td元素设置为具有边框，然后为表格border:0添加样式，同时确保将border-collapse:collapse添加到表格中。它最终应该是这样的：

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

td {
border:1px gray solid;
border-collapse:collapse;
}

Answer 4

这是：第一胎变异：

http://jsfiddle.net/6Z7R9/

table.mytable > * > tr > th,
table.mytable > * > tr > td {
  border-left: 10px solid red;
  border-top:  10px solid red;
}

table.mytable > * > tr > th,
table.mytable > * > tr > td:first-child {
  border-left: none;
}

table.mytable > *:first-child > tr:first-child > th,
table.mytable > *:first-child > tr:first-child > td {
  border-top: none;
}

仅限css表内边框

4 个答案: