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

问：

我正在尝试弄清楚如何仅在表格内添加边框。当我这样做时：

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

HTML CSS HTML 表格边框

0赞 Chetan S 8/11/2009

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

4赞 Mechanical snail 1/11/2012

也称为内部边界。

答：

4赞 Rufinus 8/11/2009 #1

这应该有效：

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>

1赞 Richard Knop 8/11/2009

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

222赞 theIV 8/11/2009 #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 演示

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

编辑：可以在 quirksmode 上找到有关这些伪类的更多信息，并且，正如预期的那样，在 IE 支持方面，您几乎是 S.O.L.。

0赞 dalgard 8/31/2014

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

1赞 jbutler483 11/7/2014

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

2赞 Jacklynn 7/22/2015

如果您曾经对表中的第一列使用行跨度，则不起作用。

214赞 anthonyrisinger 7/28/2010 #3

这对我有用：

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

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

查看示例 ...

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

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

1赞 cjroth 12/31/2011

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

11赞 Crisboot 10/5/2010 #4

由于保持与 ie7 的兼容性，ie8 我建议使用第一个孩子而不是最后一个孩子来执行此操作：

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

0赞 Michael Biermann 10/26/2011

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

47赞 TCN 12/7/2011 #5

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

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

14赞 jave.web 1/15/2016

“MAGIC”解释：并且是OLD（不是HTML5）属性（您应该使用CSS）。表示表外边框的哪些部分应该是可见的 - 表示隐藏所有外边框...... 表示内部表格边框的哪些部分应该是可见的 - 表示所有这些部分......明显地。。。请不要使用它，除非你是HTML3的狂热者...... :)framerulestableframevoidrulesall

1赞 Aaron Liu 2/12/2016

添加类似 border： 1px solid black 的内容将确保表格的外部边界获得边框。

1赞 Edoardo Facchinelli 2/20/2020

在 2020 年就像一个魅力一样，可以快速为我正在阅读的网站中间隔得离谱的表格添加一些可读性。实际上，对于内部边界来说，这已经足够了：rules=“all”

1赞 Aitor 7/3/2023

我将其用于电子邮件正文，并像魅力（2023 年）一样工作，因为 CSS 规则有时在电子邮件正文中可能很棘手。

3赞 TwoFaceZ 11/9/2012 #6

这将在没有 CSS 的情况下完成所有工作<TABLE BORDER=1 RULES=ALL FRAME=VOID>

代码来自： HTML 代码教程

14赞 dalgard 8/31/2014 #7

对于普通表标记，这里有一个简短的解决方案，适用于 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

0赞 jsbueno 2/9/2015

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

0赞 Geoff Davids 9/30/2020

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

1赞 bcr 1/6/2015 #8

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

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/

2赞 user1119279 6/22/2019 #9

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

1赞 Justina 5/26/2022 #10

这应该有效：

HTML格式：

<table frame="void" rules="all">

CSS：

td, th {
    border: 1px solid red;
}

上一个：使用 jQuery 更改输入字段的类型

下一个：如何使XML模式中的元素可选？

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

How can I apply a border only inside a table?

评论

评论

评论

评论

评论

评论

评论