如何仅在表格内应用边框? [英] How can I apply a border only inside a table?
问题描述
我试图弄清楚如何仅在表格内添加边框.当我这样做时:
I am trying to figure out how to add border only inside the table. When I do:
table {
border: 0;
}
table td, table th {
border: 1px solid black;
}
边框位于整个表格周围,也位于表格单元格之间.我想要实现的是仅在表格单元格周围的表格内部有边框(表格周围没有外部边框).
The border is around the whole table and also between table cells. What I want to achieve is to have border only inside the table around table cells (without outer border around the table).
这是我用于表格的标记(即使我认为这并不重要):
Here is markup I'm using for tables (even though I think that is not important):
<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>
这是我应用于大多数表格的一些基本样式:
And here are some basic styles I apply to most of my tables:
table {
border-collapse: collapse;
border-spacing: 0;
}
推荐答案
如果您正在做我认为自己想做的事情,则需要更多类似的东西:
If you are doing what I believe you are trying to do, you'll need something a little more like this:
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;
}
问题在于您要在所有单元格周围设置一个全边框",这使其看起来好像您在整个表格周围都有边框.
The problem is that you are setting a 'full border' around all the cells, which make it appear as if you have a border around the entire table.
干杯.
可以在 quirksmode 上找到有关这些伪类的更多信息. ,而且,正如您所料,您几乎是SOL在IE支持方面.
A little more info on those pseudo-classes can be found on quirksmode, and, as to be expected, you are pretty much S.O.L. in terms of IE support.
这篇关于如何仅在表格内应用边框?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!