我想弄清楚如何仅在表格内添加边框。当我做:
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;
}
jsFiddle 演示 http://jsfiddle.net/Daniel_Hug/8M2wp
问题是您在所有单元格周围设置了“完整边框”,这使得整个表格看起来好像有边框。
编辑:有关这些伪类的更多信息可以在怪异模式 http://www.quirksmode.org/css/firstchild.html,而且,正如所预料的,你几乎是 S.O.L.在IE支持方面。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)