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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/9947041/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-30 03:27:52  来源:igfitidea点击:

How to delete border spacing in table

csshtml-tableborderspacing

提问by Alexandru Vlas

I have a table, first row is like

我有一张桌子,第一行就像

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

I put a black background to "th". Now the 1 and 2 cells have some kind of border between/separating them... I had a look in source code and I think I found something:

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

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

This CSS code is listed in source code as "user agent stylesheettable" and I couldn't enable/disable it to test if this is the problem, but I tried and added the same code but with "none" and "0" parameters but it didn't help neither...

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

Can somebody help and guide me where is the border from please?

有人可以帮助和指导我请问边界在哪里吗?

回答by w3uiguru

Your table be like below by default and set the css rules on tables ID or Class

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

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

css:

css:

border-collapse: collapse;

回答by j08691

Set a CSS rule on your table:

在你的桌子上设置一个 CSS 规则:

table {
    border-collapse: collapse;
}

You can visit this jsFiddle exampleand switch the border-collapse property from collapse to separate to see how it changes the table's layout. The border-collapse propertycan only be collapse, separate, or inherited.

您可以访问此jsFiddle 示例并将 border-collapse 属性从 collapse 切换到单独,以查看它如何更改表格的布局。在边界崩溃属性只能是崩溃,单独或继承。

回答by cp3

border-collapse: noneis invalid. Try border-collapse: collapse.

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

回答by NullPoiиteя

you can use border collapse. The border-collapse property sets whether the table borders are collapsed into a single border or detached as in standard HTML.

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

From http://www.blooberry.com/indexdot/css/properties/table/bcollapse.htm:

来自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.

在 CSS2 折叠边框模型中,规定了解决为相邻单元格指定的边框不同和冲突的情况:

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

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

  3. 如果所有边界共享成员都为边界组件指定了“none”值,那么只有这样,边界才会被设置为“ none”。

  4. 如果共享边框有 ' border-width' 争用,(当然,没有组件的 'border' 值为 " hidden",则应呈现最大的边框宽度。

  5. 如果共享边框存在 'border-style' 争用,则应使用建议的优先级(从左到右递减):" double", " solid", " dashed", " dotted", " ridge", " outset", " groove", " inset。 ”

  6. 如果共享边框存在“边框颜色”争用,则应使用建议的优先级(从左到右递减):表格单元格、表格行、行组、列、列组、表格。

    table
      {
       border-collapse:collapse;
      }
    

笔记

  1. 在“折叠边框”渲染模型中,“inset”的“border-style”值表现为“groove”,“outset”表现为“ridge”。
  2. CSS2 指定此属性的初始值为“collapse”。由于 Mozilla 和 Opera 的初始值是“separate”,CSS2.1 现在将“separate”作为官方初始值。

回答by Fury

Try this

尝试这个

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