我想弄清楚如何仅在表格内添加边框。当我这样做时：
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;
}
如果您正在做我认为您正在尝试做的事情，您将需要更像这样的东西：
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;
}
问题是您在所有单元格周围设置了“完整边框”，这使得整个表格看起来好像有边框。
编辑：有关这些伪类的更多信息可以在 quirksmode 上找到，并且，正如预期的那样，你几乎是 S.O.L.在 IE 支持方面。
一个非常简单的方法让您达到预期效果的示例：
<table border="1" frame="void" rules="all">
<tr>
<td>1111</td>
<td>2222</td>
<td>3333</td>
</tr>
<tr>
<td>4444</td>
<td>5555</td>
<td>6666</td>
</tr>
</table>
对于普通的表格标记，这里有一个简短的解决方案，适用于 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
由于保持与 ie7、ie8 的兼容性，我建议使用第一个子级而不是最后一个子级来执行此操作：
table tr td{border-top:1px solid #ffffff;border-left:1px solid #ffffff;}
table tr td:first-child{border-left:0;}
table tr:first-child td{border-top:0;}
您可以在以下位置了解 CSS 2.1 伪类： http://msdn.microsoft.com/en-us/library/cc351024(VS.85).aspx
这应该有效：
table {
border:0;
}
table td, table th {
border: 1px solid black;
border-collapse: collapse;
}
编辑：
我刚刚尝试过，没有表格边框。但如果我设置了表格边框，它就会被边框折叠消除。
这是测试文件：
<html>
<head>
<style type="text/css">
table {
border-collapse: collapse;
border-spacing: 0;
}
table {
border: 0;
}
table td, table th {
border: 1px solid black;
}
</style>
</head>
<body>
<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>
</body>
</html>
适用于 tbody/thead/tfoot 和 td/th 的任意组合
table.inner-border {
border-collapse: collapse;
border-spacing: 0;
}
table.inner-border > thead > tr > th,
table.inner-border > thead > tr > td,
table.inner-border > tbody > tr > th,
table.inner-border > tbody > tr > td,
table.inner-border > tfoot > tr > th,
table.inner-border > tfoot > tr > td {
border-bottom: 1px solid black;
border-right: 1px solid black;
}
table.inner-border > thead > tr > :last-child,
table.inner-border > tbody > tr > :last-child,
table.inner-border > tfoot > tr > :last-child {
border-right: 0;
}
table.inner-border > :last-child > tr:last-child > td,
table.inner-border > :last-child > tr:last-child > th {
border-bottom: 0;
}<table class="inner-border">
<thead>
<tr>
<th>head1,1</th>
<td>head1,2</td>
<td>head1,3</td>
</tr>
<tr>
<td>head2,1</td>
<td>head2,2</td>
<th>head2,3</th>
</tr>
</thead>
<tr>
<td>1,1</td>
<th>1,2</th>
<td>1,3</td>
</tr>
<tr>
<td>2,1</td>
<td>2,2</td>
<td>2,3</td>
</tr>
<tr>
<td>3,1</td>
<td>3,2</td>
<td>3,3</td>
</tr>
<thead>
<tr>
<th>foot1,1</th>
<td>foot1,2</td>
<td>foot1,3</td>
</tr>
<tr>
<td>foot2,1</td>
<th>foot2,2</th>
<th>foot2,3</th>
</tr>
</thead>
</table>使用以下命令向每个单元格添加边框：
table > tbody > tr > td { border: 1px solid rgba(255, 255, 255, 0.1); }
删除第一行所有单元格的顶部边框：
table > tbody > tr:first-child > td { border-top: 0; }
删除第一列单元格的左边框：
table > tbody > tr > td:first-child { border-left: 0; }
删除最后一列单元格的右边框：
table > tbody > tr > td:last-child { border-right: 0; }
删除最后一行单元格的底部边框：
table > tbody > tr:last-child > td { border-bottom: 0; }
这应该有效：
HTML：
<table frame="void" rules="all">
CSS：
td, th {
border: 1px solid red;
}