207

我想弄清楚如何只在表格内添加边框。当我做：

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;
}
4

9 回答 9

212

如果您正在做我相信您正在尝试做的事情，那么您将需要更多这样的东西：

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 支持方面几乎是 SOL。

于 2009-08-10T22:05:49.793 回答
204

这对我有用：

table {
    border-collapse: collapse;
    border-style: hidden;
}

table td, table th {
    border: 1px solid black;
}

查看示例...

在 FF 3.6 和 Chromium 5.0 中测试，IE 缺乏支持；来自W3C：

具有“隐藏”的“边界样式”的边界优先于所有其他冲突边界。具有此值的任何边框都会抑制此位置的所有边框。

于 2010-07-28T01:02:34.197 回答
44

一个非常简单的例子让你达到预期的效果：

<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>
于 2011-12-07T10:02:22.367 回答
12

对于普通的表格标记，这是一个适用于 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; }

可以在这里看到一个测试用例：http: //codepen.io/dalgard/pen/wmcdE

于 2014-08-31T12:14:08.030 回答
11

由于保持与 ie7、ie8 的兼容性，我建议使用 first-child 而不是 last-child 来执行此操作：

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;}

您可以在以下位置了解 CSS 2.1 伪类：http: //msdn.microsoft.com/en-us/library/cc351024 (VS.85).aspx

于 2010-10-05T15:50:21.847 回答
4

这应该工作：

table {
 border:0;
}

table td, table th {
    border: 1px solid black;
    border-collapse: collapse;
}

编辑：

我刚试过，没有表格边框。但是如果我设置了一个表格边框，它会被边框折叠消除。

这是测试文件：

<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>
于 2009-08-10T21:56:40.047 回答
3

不用css就可以搞定 <TABLE BORDER=1 RULES=ALL FRAME=VOID>

代码来自：HTML 代码教程

于 2012-11-08T20:29:39.317 回答
1

使用以下命令为每个单元格添加边框：

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/

于 2015-01-05T21:15:09.473 回答
1

适用于 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>

于 2019-06-22T10:11:20.297 回答