使用CSS删除不需要的表格单元格边框

我有一个特殊的令人沮丧的问题。对于简单的标记：使用CSS删除不需要的表格单元格边框

<table> 
    <thead> 
     <tr><th>1</th><th>2</th><th>3</th></tr> 
    </thead> 
    <tbody> 
     <tr><td>a</td><td>b></td><td>c</td></tr> 
     <tr class='odd'><td>x</td><td>y</td><td>z</td></tr> 
    </tbody> 
</table>

我应用不同的背景颜色值给THEAD，TR，和TR奇数元素。问题是，在大多数浏览器中，每个单元格都有一个不需要的边界，而不是任何表格行的颜色。只有在Firefox 3.5中，表格在任何单元格中都没有边框。

我只想知道如何在其他主流浏览器中删除这些边框，以便您在表格中看到的唯一内容是交替的行颜色。

来源

2010-01-11 Bob

是什么颜色的边界？ – SLaks 2010-01-11 01:40:08

感谢大家建议添加border-collapse：折叠到CSS。那样做了。 – Bob 2010-01-11 01:47:15

169

你需要把它添加到您的CSS ：

table { border-collapse:collapse }

来源

2010-01-11 01:38:30

+10

请注意，这必须应用于_table_，而不是_td_'s。我犯了这个错误，花了半个多小时的时间试图弄清楚为什么它不起作用。 – javawizard 2014-07-05 02:22:24

修改你的HTML这样的：

<table border="0" cellpadding="0" cellspacing="0"> 
    <thead> 
     <tr><td>1</td><td>2</td><td>3</td></tr> 
    </thead> 
    <tbody> 
     <tr><td>a</td><td>b></td><td>c</td></tr> 
     <tr class='odd'><td>x</td><td>y</td><td>z</td></tr> 
    </tbody> 
</table>

（我加border="0" cellpadding="0" cellspacing="0"）

在CSS中，你可以做到以下几点：

table { 
    border-collapse: collapse; 
}

来源

2010-01-11 01:38:20

CSS是首选的方式。 – 2010-01-11 01:39:34

修改我的答案以包含css – 2010-01-11 01:41:44

尝试将border: 0px; border-collapse: collapse;的样式分配给表格元素。

来源

2010-01-11 01:38:30

@Josh不是'border：none'吗？ – 2010-01-11 01:40:28

@DougNeiner旧帖子，但没有和0都是同样有效的。我喜欢0，因为我必须输入更少的:) – 2015-03-09 15:48:58

将该表的cellspacing属性设置为0。

您也可以使用CSS风格border-spacing: 0，但前提是您不需要支持旧版本的IE。

来源

2010-01-11 01:38:40 SLaks

添加一些CSS：

td, th { 
    border:none; 
}

来源

2010-01-11 01:38:57

对我来说不适用于chrome 60.0.3112.113（当应用于表 – 2017-09-14 09:17:51

您可能还需要添加

table td { border:0; }

以上，相当于= “0”

它摆脱了填充的自动设置的cellpadding通过浏览器添加到单元格中，这可能取决于文档类型和/或用于重置默认浏览器样式的任何CSS

来源

2012-03-12 23:11:24 falc0n

时）Cellpadding是表格内容与其边界'td {padding：X}'之间的空格。 Cellspacing是每个单元格之间的空间（单元格边界之间的“边距”）。你可以设置'border-collapse'来模拟'cellspacing'属性在table标签上做些什么，但这不是万无一失的。 – MetalFrog 2012-03-13 19:17:58

在尝试了上述建议之后，唯一对我有用的是在子主题style.css的以下部分中将边框属性更改为“0”（执行“查找”操作以找到每一个 - 以下是只是网页摘要）：

.comment-content table { 
    border-bottom: 1px solid #ddd; 

.comment-content td { 
    border-top: 1px solid #ddd; 
    padding: 6px 10px 6px 0; 
}

因此看起来像这样算账：

.comment-content table { 
    border-bottom: 0; 

.comment-content td { 
    border-top: 0; 
    padding: 6px 10px 6px 0; 
}

来源

2012-06-27 00:21:13

-2

<td style=" border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px;">

如果你愿意，你可以以类似的东西

$style = ' style=" border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px;"'; 

<td $style>bla bla</td><td $style>bla bla</td><td $style>bla bla</td><td $style>bla bla</td>

来源

2014-02-15 13:08:34 Admax

我不明白这个答案中的$ style是什么。您是否使用某种服务器端处理语言来设置样式属性？ – 2015-03-09 15:50:16

Boo内联样式。 – mopsyd 2015-03-26 18:43:57

-1

有时甚至在清除border之后。

原因是你在td里面有图像，给图像display:block解决了它。

来源

2014-07-23 13:23:47 bresleveloper

删除边框，中庸之道使用CSS这样的：

td { 
border-style : hidden!important; 
}

来源

2017-04-02 11:59:36

使用CSS删除不需要的表格单元格边框

回答

相关问题