如何仅在表格内应用边框？

Posted 2023-03-05

【中文标题】如何仅在表格内应用边框？

【英文标题】：How can I apply a border only inside a table?

【发布时间】：2010-11-18 10:48:21

【问题描述】：

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

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;

【问题讨论】：

我只看到单元格周围的边框。由于每个单元格都有边框，因此表格似乎有边框。也许我没明白这个问题？

也称为内部边框。

【参考方案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>

【参考方案2】：

如果您正在做我认为您正在尝试做的事情，您将需要更多这样的东西：

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 Demo

问题是您在所有单元格周围设置了一个“完整边框”，这使得它看起来好像整个表格都有一个边框。

干杯。

编辑：关于这些伪类的更多信息可以在quirksmode 上找到，而且，正如所料，你几乎是 S.O.L.在 IE 支持方面。

【讨论】：

对于像这样的简单表，有一个更短的解决方案，通过使用下一个兄弟组合器来避免使用伪类。看我的回答。

@theIV，这个问题在 5 多年前就得到了回答，是否有任何“新”/“更有效”的方法？

如果您曾经在表的第一列上使用 rowspan，则此方法不起作用。

【参考方案3】：

一个非常简单的方式让您达到预期效果的示例：

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

【讨论】：

"MAGIC" 解释： frame 和 rules 是 OLD（不是 html5） table 属性（您应该改用 CSS ）。 frame 表示 outside 表格边框的哪些部分应该可见 - void 表示隐藏所有外部边框... rules 表示 inside 表格边框的哪些部分应该可见可见 - all 表示所有这些......显然......请不要使用它，除非你是 HTML3 ***者...... :)

添加类似border: 1px solid black之类的东西会确保表格的外边界有一个边框。

在 2020 年就像一个魅力一样快速为我正在阅读的网站中一个可笑的间隔表格增加了一些可读性。实际上，这对于内部边界就足够了：rules="all"

【参考方案4】：

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

table tr tdborder-top:1px solid #ffffff;border-left:1px solid #ffffff;

table tr td:first-childborder-left:0;

table tr:first-child tdborder-top:0;

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

【讨论】：

这是一个很好的解决方案。但要小心，如果您的一个表格单元格中有另一个表格，并且想要查看内部边框，则您的“内部”表格需要另一组 CSS 行

【参考方案5】：

为每个单元格添加边框：

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/

【参考方案6】：

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

【讨论】：

太棒了 - 因为这也允许人们为表格设置不同的边框，而不是仅仅不显示它。

这真的很聪明，也很短。我非常喜欢这个。

【参考方案7】：

这一切都可以在没有 css 的情况下完成 <TABLE BORDER=1 RULES=ALL FRAME=VOID>

代码来自：HTML CODE TUTORIAL

【参考方案8】：

这对我有用：

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


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

view example ...

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

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

【讨论】：

只要不需要表格边框，这绝对是最优雅的解决方案。

【参考方案9】：

这应该可行：

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>

【讨论】：

不行，我试过了。我将编辑我的第一篇文章。