如何在表格中删除边框间距

Question

我有一个表格，第一行像这样

<tr>
<th>1</th>
<th>2</th>
</tr>

我给“th”标签添加了黑色背景。现在1号和2号单元格之间有一些边框隔开... 我查看了源代码，我认为我发现了一些东西：

border-collapse: separate;
border-spacing: 2px;

这段CSS代码在源代码中被列为“user agent stylesheettable”，我无法启用/禁用它以测试是否存在问题，但我尝试添加了相同的代码，但使用“none”和“0”参数，但这也没有帮助...

有人可以帮忙指导一下该边框在哪里吗？

- Alexandru Vlas

Answer 1

默认情况下，您的表格应如下所示，并在表格的ID或类上设置CSS规则。

<table border="0" cellspacing="0" cellpadding="0">
 <tr>
  <th>1</th>
  <th>2</th>
</tr>
</table>

样式表：

border-collapse: collapse;

- w3uiguru

---

谢谢，是表格属性中的“cellspacing =”1“，所以我把它改成了”0“，我的错）感谢帮助。 - Alexandru Vlas

最终我不得不使用normalize.css来阻止Chrome在我的input元素周围添加2px的margin。 - user692942

如果您仍然想要边框，但它们之间没有填充，该怎么办？ - SuperUberDuper

问题是关于 CSS 的，cellspacing和cellpadding已经被弃用（在HTML5中已删除），它们不是CSS，而是属性，这不是正确的答案！ - Marco

@Marco: 由于HTML5直到大约2014年10月才最终确定，比这个问题/答案发布的时间晚了2年多，而且OP没有指定“HTML5”或“仅限CSS”，我认为这 是 提问/采纳时的正确答案。 - Steve Gomez

@SteveG。我也同意你的观点，但我的意思是，在HTML5出现之前，使用CSS进行排版是更为优雅和推荐的方法，你不同意吗？不过，我只是在讨论这个想法，以便于后来的人更清楚。谢谢 :) - Marco

Answer 2

在你的表格上设置一个CSS规则：

table {
    border-collapse: collapse;
}

您可以访问这个jsFiddle示例，并将border-collapse属性从collapse更改为separate，以查看其如何改变表格的布局。 border-collapse属性只能是collapse、separate或继承。

- j08691

---

谢谢，是表格属性中的“cellspacing =”1“，所以我把它改成了”0“，我的错）感谢帮助。 - Alexandru Vlas

Answer 3

试试这个

table {
    border: none;
    border-spacing: 0;
}

- Fury

Answer 4

border-collapse: none是无效的。请尝试使用border-collapse: collapse。

- cp3

---

谢谢，是表格属性中的“cellspacing =” 1“，所以我把它改成了”0“，是我的错）感谢帮助。 - Alexandru Vlas

最好将样式和间距保留在CSS文件中。cellspacing和border-collapse具有相同的效果。将内容的格式留给CSS处理。 - cp3

Answer 5

您可以使用border-collapse属性。border-collapse属性设置表格边框是合并为单个边框还是像标准HTML中一样分离。

来自http://www.blooberry.com/indexdot/css/properties/table/bcollapse.htm：

In the CSS2 collapsed border model, provision is made for resolution of cases where borders specified for adjacent cells differ and are in conflict:

1. If any shared border has a component where the 'border' is set to "hidden" for ANY of the sharing members, the common border should be unconditionally set to "hidden".

2. If any shared border has a component where the 'border' is set to "none", it can be overridden by any other border-sharing member carrying a renderable 'border' property value.

3. If ALL border-sharing members specify a value of "none" for a border component, only then will the border be set to "none".

4. If a shared border has a 'border-width' contention, (with no component having a 'border' value of "hidden" of course, the largest border-width should be rendered.

5. If a shared border has a 'border-style' contention, the suggested priority should be used (decreasing from left to right): "double", "solid", "dashed", "dotted", "ridge", "outset", "groove", "inset."

6. If a shared border has a 'border-color' contention, the suggested priority should be used (decreasing from left to right): Table cell, table row, row group, column, column group, table.

   table
     {
      border-collapse:collapse;
     }
   

Note

1. In the "collapsed border" rendering model, the 'border-style' value of "inset" behaves like "groove", and "outset" behaves like "ridge."
2. CSS2 specified that the initial value for this property was "collapse". Because Mozilla and Opera behave such that the initial value is "separate", CSS2.1 now makes "separate" the official initial value.

- user1280616