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

195

我试图弄清楚如何仅在表格内添加边框。当我做：

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

— 理查德·诺普
source

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

— Chetan S

3

也称为内部边界。

— 机械蜗牛

203

如果您正在做我认为正在尝试做的事情，则需要更多类似以下内容：

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。

— IV
source

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

— dalgard 2014年

1

@theIV，在5年前就得到了答案，有没有这种“新” /“更有效”的方式？

— jbutler483 2014年

如果您曾经在表的第一列上使用rowspan，则此方法将无效。

— 2015年

191

这对我有用：

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

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

查看示例...

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

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

— 蒽林格
source

1

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

— cjroth 2011年

42

一个非常简单的方法示例，您可以达到所需的效果：

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

— 强尼
source

13

说明为“ MAGIC”： frame并且rules是OLD（不是HTML5） table属性（您应该改用CSS）。frame说出外部表格边框的哪些部分应该可见- void表示隐藏所有外部边框... rules说出内部表格边框的哪些部分应该可见- all意味着所有边框...显然...请不要使用它，除非您是HTML3的狂热分子……:)

— jave.web，2016年

1

添加边框等内容：1px的纯黑色将确保表格的外部边界为边框。

— 亚伦·刘

1

到2020年，它的运作就像是一种魅力，可以为我正在阅读的网站中一个荒谬的表快速增加一些可读性。实际上，这对于内部边界就足够了：rules =“ all”

— Edoardo Facchinelli

11

由于与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/zh-cn/library/cc351024(VS.85).aspx

— 短靴
source

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

— Michael Biermann

10

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

— 达尔加德
source

太好了-因为这样还可以为表格设置不同的边框，而不只是不显示边框。

— jsbueno 2015年

5

这应该工作：

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>

— 鲁菲努斯
source

不，那没有用，我已经尝试过了。我将编辑我的第一篇文章。

— 理查德·诺普

3

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

来自以下代码的代码：HTML代码教程

— 面对面
source

0

将此边框添加到每个单元格：

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/

— 布赖恩
source

0

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

展开摘要

— 用户名
source