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

Posted 2023-03-05

【中文标题】如何删除表格中的边框间距

【英文标题】：How to delete border spacing in table

【发布时间】：2012-04-14 09:05:17

【问题描述】：

我有一张桌子，第一行是这样的

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

我为“th”设置了黑色背景。现在 1 和 2 单元格之间有某种边界/分隔它们......我查看了源代码，我想我发现了一些东西：

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

此 CSS 代码在源代码中列为“用户代理样式表表”，我无法启用/禁用它来测试这是否是问题所在，但我尝试添加了相同的代码，但使用“无”和“0” " 参数，但它也没有帮助......

有人可以帮助并指导我边界在哪里吗？

【参考方案1】：

您的表格默认如下所示，并在表格 ID 或类上设置 css 规则

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

css：

border-collapse: collapse;

【讨论】：

谢谢，这是表格属性中的“cellspacing="1”，所以我把它改成了“0”，我的错）谢谢你的帮助

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

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

问题是关于 css，cellspacing em cellpadding 已弃用（从 html5 中删除）并且不是 css，它们是属性，这不是正确的答案！

@Marco：看到 HTML5 直到大约 2014 年 10 月才最终确定，在发布此问题/答案后 2 年多，并且 OP 没有指定“HTML5”或'CSS-only'，我认为这是在询问/接受时的正确答案。

【参考方案2】：

在您的表格上设置 CSS 规则：

table 
    border-collapse: collapse;

您可以访问此jsFiddle example 并将border-collapse 属性从collapse 切换为separate，以查看它如何更改表格的布局。 border-collapse property 只能折叠、分离或继承。

【讨论】：

谢谢，这是表格属性中的“cellspacing="1”，所以我把它改成了“0”，我的错）谢谢你的帮助

【参考方案3】：

border-collapse: none 无效。试试border-collapse: collapse。

【讨论】：

谢谢，这是表格属性中的“cellspacing="1”，所以我把它改成了“0”，我的错）谢谢你的帮助

嗯。最好在 CSS 文件中保留样式和间距。 cellspacing 和border-collapse 的结果是一样的。将内容的格式留给 CSS。

【参考方案4】：

试试这个

table 
    border: none;
    border-spacing: 0;

【参考方案5】：

您可以使用边框折叠。 border-collapse 属性设置表格边框是折叠成单个边框还是像标准 HTML 中那样分离。

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

在 CSS2 折叠边框模型中，为解决为相邻单元格指定的边框不同且发生冲突的情况做出了规定：

如果任何共享边框有一个组件，其中任何共享成员的“边框”设置为“hidden”，则公共边框应无条件设置为“hidden”。

如果任何共享边框的组件中“border”设置为“无”，则它可以被任何其他带有可渲染“边框”属性值的边框共享成员覆盖。

如果所有边框共享成员都为边框组件指定值“none”，那么只有这样边框才会设置为“none”。

如果共享边框存在“border-width”争用，（当然，没有组件的“边框”值为“hidden”，则应呈现最大边框宽度。

如果共享边框存在“边框样式”争用，则应使用建议的优先级（从左到右递减）：“double”、“solid”、“dashed” , "dotted", "ridge", "outset", "groove", "inset."

如果共享边框存在“边框颜色”争用，则应使用建议的优先级（从左到右递减）：表格单元格、表格行、行组、列、列组、表格。

table
  
   border-collapse:collapse;
  

注意

在“折叠边框”渲染模型中，“inset”的“border-style”值的行为类似于“groove”，“outset”的行为类似于“ridge”。 CSS2 指定此属性的初始值为“collapse”。因为 Mozilla 和 Opera 的行为使得初始值是“分离的”，所以 CSS2.1 现在将“分离”作为正式的初始值。