CSS – 仅在表格内边框
我想弄清楚如何在表内添加边框。 当我做：
table { border: 0; } table td, table th { border: 1px solid black; } 边界在整个桌子周围，也在桌子单元之间。 我想要实现的是在表格周围的表格周围只有边框（在表格周围没有外边框）。
这里是我用于表格的标记（尽pipe我认为这不重要）：
<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; }
jsFiddle演示
问题是你正在所有的单元格周围设置一个“全边框”，这使得它看起来好像在整个表格的边框上。
干杯。
编辑：有关这些伪类的更多信息可以在quirksmode上find，而且，正如预期的那样，在IE支持方面，你几乎是SOL。
这对我有用：
table { border-collapse: collapse; border-style: hidden; } table td, table th { border: 1px solid black; }
查看示例…
在FF 3.6和Chromium 5.0中testing，IE缺乏支持; 来自W3C ：
具有“隐藏”边界风格的边界优先于所有其他相互冲突的边界。 任何具有此值的边框都会压缩此位置的所有边框。
一个非常简单的方法来达到预期效果的例子：
<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>
由于与ie7兼容，即ie8我build议使用第一个孩子，而不是最后一个孩子来做到这一点：
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;}
你可以在http://msdn.microsoft.com/en-us/library/cc351024(VS.85).aspx上学习CSS 2.1伪类
对于普通表格标记，下面是一个简短的解决scheme，适用于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; }
testing案例可以在这里看到： http : //codepen.io/dalgard/pen/wmcdE
这应该工作：
table { border:0; } table td, table th { border: 1px solid black; border-collapse: collapse; }
编辑：
我只是试了一下，没有桌边。 但是如果我设置了一个表格边框，它会被边框消除。
这是testing文件：
<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>
这将做到这一切没有CSS <TABLE BORDER=1 RULES=ALL FRAME=VOID>
代码来自： HTML代码教程
添加边框到每个单元格中：
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; }
