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

Posted 2023-03-05

【中文标题】使用 CSS 删除不需要的表格单元格边框

【英文标题】：Removing unwanted table cell borders with CSS

【发布时间】：2011-01-03 14:39:02

【问题描述】：

我有一个奇怪而令人沮丧的问题。对于简单的标记：

<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 中，表格在任何单元格中都没有边框。

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

【问题讨论】：

感谢所有建议在 CSS 中添加border-collapse:collapse 的人。做到了。

【参考方案1】：

您需要将此添加到您的 CSS：

table  border-collapse:collapse 

【讨论】：

请注意，这必须应用于 table，而不是 td。我刚刚犯了这个错误，花了半个多小时试图弄清楚为什么它不起作用。

【参考方案2】：

要删除边框，只需像这样使用 css ：

td 
 border-style : hidden!important;

【参考方案3】：

添加一些css：

td, th 
   border:none;

【讨论】：

应用于表格时在 chrome 60.0.3112.113 上对我不起作用

【参考方案4】：

像这样修改你的 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;

【参考方案5】：

将表的cellspacing属性设置为0。

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

【参考方案6】：

您可能还想添加

table td  border:0; 

以上等价于设置cellpadding="0"

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

【讨论】：

Cellpadding 是表格内容与其边界 tdpadding:X 之间的空间。单元格间距是每个单元格边界之间的空间（单元格边界之间的“边距”）。您可以设置border-collapse 来模仿cellspacing 属性在表格标签上的作用，但这并不是万无一失的。

【参考方案7】：

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

.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;

【参考方案8】：

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

【讨论】：

@Josh 不是border: none吗？

@DougNeiner 旧帖，但 none 和 0 都同样有效。我喜欢 0，因为我必须少输入 :)

【参考方案9】：

有时甚至在清除borders 之后。

原因是td里面有图片，给图片display:block就解决了。