我试图弄清楚如何只在表内添加边界。当我这样做的时候:
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:0;
}
table td, table th {
border: 1px solid black;
border-collapse: collapse;
}
编辑:
我刚试过了，没有桌子边框。但如果我设置了一个表格边界，它就会被边界崩溃消除。
这是testfile:
<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>
如果你正在做我相信你正在尝试做的事情，你将需要一些像这样的东西:
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支持方面，您的表现非常S.O.L.。
对于普通的表标记，这里有一个简短的解决方案，适用于BrowserStack上的所有设备/浏览器，除了ie7及以下:
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
为每个单元格添加边框:
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; }
http://jsfiddle.net/hzru0ytx/
适用于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>
