边框合并 | CSS-Tricks

CSS 年鉴 → 属性 → B → border-collapse

Sara Cope 于 2022 年 5 月 20 日

border-collapse 属性用于 <table> 元素（或通过 display: table 或 display: inline-table 使其行为类似表格的元素）。

语法

border-collapse: collapse | separate;

初始值： separate
应用于： table 和 inline-table 元素
继承： 是
计算值： 如指定
动画类型： 离散

值

/* Keyword values */
border-collapse: collapse;
border-collapse: separate;

/* Global values */
border-collapse: inherit;
border-collapse: initial;
border-collapse: revert;
border-collapse: revert-layer;
border-collapse: unset;

separate （默认） - 所有表格单元格都有各自独立的边框，单元格之间可能会有间距。
collapse - 表格单元格之间的间距和边框都会合并，因此只有一个边框，单元格之间没有间距。

当 border-collapse 为 collapse 时，值得注意的是，诸如 border-spacing 和 border-radius（在实际边框上）之类的属性不起作用。如果你需要其中任何一个，你需要 border-collapse: separate;。

以下是一个可以在两者之间切换的示例

浏览器支持

Chrome	Safari	Firefox	Opera	IE	Android	iOS
是	是	是	是	是	是	是

年鉴于 2022 年 11 月 17 日

border-spacing

.element { border-spacing: 5px; }

Chris Coyier

年鉴于 2022 年 11 月 10 日

border-radius

.element { border-radius: 10px; }

Sara Cope

jana

# 2011 年 12 月 16 日

Simon

# 2012 年 1 月 31 日

你写道
/* 或者什么也不做，这是默认值 */ 在两个 CSS 示例中
没有理解。

Jarrod

评论永久链接# 2012 年 9 月 11 日

Simon，默认值为“separate” - 忽略 /* 注释 */
Chintan rabadiya

评论永久链接# 2019 年 8 月 22 日

您使用哪个库来执行排序命令？就像 ul>li 一样

lukasz krawczyk

# 2012 年 12 月 11 日

使用表格非常简单但非常有用。顺便说一句，这个年鉴的想法很棒 :)

Kiefer

# 2013 年 4 月 3 日

我使用了这个，它完全按照我想要的方式修复了 IE9 问题，但它去掉了我的阴影效果。您知道如何同时获得这两个效果吗？

谢谢！
Kiefer

Dimitrios Savvopoulos

评论永久链接# 2013 年 5 月 29 日

@email to fax：你的问题超出了主题。

顺便说一句，您可能想要考虑从元素中删除 position absolute。

email to fax

# 2013 年 5 月 17 日

您好,

我使用 #wrap { display:table;border-collapse: collapse; border:1px solid #cccc},

那么如何使边框完整？

我创建了一个 jsfiddle 包含我的完整代码（除了图像）。 http://jsfiddle.net/qHVk3/

谢谢

Sagan Internet Marketing

# 2013 年 10 月 28 日

因此，border-collapse 或多或少地隐藏了顶部边框……这意味着如果您想通过更改边框颜色来“突出显示”一行，则必须更改要突出显示的行的边框底部和上一行的边框底部……不幸的是，这排除了使用 CSS 来完成此操作……至少现在，直到“！”被添加到现代浏览器中。

Sagan Internet Marketing

# 2013 年 10 月 28 日

实际上，我让突出显示效果可以使用 box-shadow 工作
tr:hover td { position: relative; box-shadow: 0px 0px 1px #333; }

Ben

评论永久链接# 2015 年 2 月 24 日

很棒的想法，伙计 - 我来这里是为了寻找解决这个问题的方案，干杯
A2D

评论永久链接# 2016 年 4 月 10 日
好主意，但是如果你想通过更改边框颜色来突出显示特定单元格，它不起作用 - 比如在日历中突出显示“今天”。别问我为什么，这就是设计……
我不得不做一些类似的事情来创建“缺少的”顶部边框
```
/* assuming a 2px border around cells and highlight bordercolor #c00 */
.highlighted_cell {
    border-color: #c00;
}
.highlighted_cell:before {
    content: "";
    position: absolute;
    border: 1px solid #c00;
    top: -2px;
    left: -2px;
    width: calc(100% + 4px);
}
```
Herman

评论永久链接# 2016 年 4 月 13 日

有什么办法可以让它只在 tr:hover 上工作（用整个行的边框突出显示，而不是每个单独的单元格）？

Adam Dehnel

# 2014 年 1 月 25 日

我发现 border-spacing 简写语法是 left/right 然后是 top/bottom，而不是像 box-model 简写那样是 top/bottom 然后是 left/right 很奇怪。而是这个使用“x 轴”和“y 轴”值，比如 background-position 或类似的。可能值得在示例代码中注意。

关于我正在谈论什么的例子：http://codepen.io/arsdehnel/pen/cqjBs

Manidip Banerjee

# 2014 年 2 月 23 日

嗨，我正在使用一个移动响应式的免费 WordPress 主题，它以某种方式删除了任何 HTML 表格的表格边框。我尝试以这种方式指定边框

table class=”aligncenter” border=”1″ cellspacing=”1″ cellpadding=”1″ align=”center”>

在帖子中，边框仍然没有显示出来。

我在源代码中，或者更确切地说是在 styles.css 文件中找到了以下代码

table {
border-collapse: collapse;
}

我尝试用以下代码覆盖它

table {
border-collapse: separate;
border-spacing: 1px;
}

但它不起作用。您能告诉我导致这种情况的确切原因吗？
提前感谢！

RoyD

评论永久链接# 2015 年 3 月 20 日

Mandip，您得到关于这个问题的回复了吗？我在 WordPress 中遇到了类似的问题，欢迎提供解决方案

Gerson L

# 2014 年 5 月 1 日

太棒了，正是我想要的！

Fesh

# 2014 年 6 月 19 日

在 Firefox 中，border-collapse: collapse 在 rowspan 上存在问题。错误的 URL 在 https://bugzilla.mozilla.org/show_bug.cgi?id=332740

Muhammad Tayyab

# 2014 年 11 月 11 日

很棒的文章 (Y) 它帮助我很多来解决我对 collapse 和 separate 的困惑。它非常有信息量，是最好的网站，用于网页开发。
继续加油，兄弟。:)

Guillaume Bois

# 2015 年 5 月 28 日

如果还可以添加默认示例（separate 和 spacing 0）会很酷，这很有趣，因为它是所有可能解决方案中最难看的！

Joshua Ballesteros

# 2015 年 12 月 3 日

我使用了一个表格，并且将边框圆角应用到角落。问题是，当它折叠时，边框圆角不起作用。

—— 广告 ——-
我的网站 http://www.microuniver.com

Brandie

# 2016 年 8 月 16 日

嗨，大家好，我在网站上的 CMS 中工作，最近学会了（自学）在源代码中工作，这帮助我使事物更加一致！我注意到这个链接中的表格 https://www.brattbank.com/hours-holidays.htm 并且尝试修复它，但我无法在代码中看到这个问题；这是“Main Office”部分的代码，在 IE 和 Chrome 中都显示为乱七八糟。有什么建议吗？
table border=”0″ cellpadding=”1″ cellspacing=”1″ style=”height:80px; width:511px”>

Main Office

M-F

Sat.

Kaushik Bhadani

# 2016 年 10 月 18 日

我遇到了和 milap 一样的问题，我不确定 milap 是否得到了这个问题的解决方案，但我遇到了同样的问题

嗨，我正在使用一个移动响应式的免费 WordPress 主题，它以某种方式删除了任何 HTML 表格的表格边框。我尝试以这种方式指定边框

table class=”aligncenter” border=”1″ cellspacing=”1″ cellpadding=”1″ align=”center”>

在帖子中，边框仍然没有显示出来。

我在源代码中，或者更确切地说是在 styles.css 文件中找到了以下代码

table {
border-collapse: collapse;
}

我尝试用以下代码覆盖它

table {
border-collapse: separate;
border-spacing: 1px;
}

但它不起作用。您能告诉我导致这种情况的确切原因吗？
提前感谢！

Ruslan

# 2017 年 12 月 22 日

A2D，很棒的解决方案，谢谢！需要在 td 上使用“position: relative”才能使其工作。

Mohamed 3mara

# 2022 年 7 月 5 日

感谢您的文章，如果我想删除表格头部和主体之间的边框间距。
我该怎么做？

语法

值

浏览器支持

相关

border-spacing

border-radius

评论

发表评论 取消回复

发表评论取消回复