CSS - 仅在表内部的边框 [英] CSS - Border only inside the 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;
}

jsFiddle演示

问题是，您正在所有单元格上设置完整边框好像整个桌子周围都有边框。

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.

这篇关于CSS - 仅在表内部的边框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！