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

Question

我很独特且困扰的问题。对于这个简单的标记：

I have a peculiar and frustrating problem. For the simple markup:

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

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

- Bob

---

感谢各位建议将border-collapse:collapse添加到CSS中，这解决了问题。 - Bob

Answer 1

你需要在你的CSS中添加这个：

table { border-collapse:collapse }

- Doug Neiner

---

注意，这应该应用于“表格(table)”，而不是“单元格(td)”。我刚刚犯了这个错误，花费了半个多小时才弄清楚为什么它不起作用。 - javawizard

Answer 2

只需使用以下CSS代码即可去掉边框：

td {
 border-style : hidden!important;
}

- Aouidane Med Amine

---

非常简单易用，一切正常，谢谢！ - Youssef Snoussi

我知道时间过去很久了，但是你的回答真的帮了我很多，而且没有使用 border-collapse！点赞 + 感谢！ - SNBS

Answer 3

请将您的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;
}

- Gabriel McAdams

Answer 4

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

如果不需要支持旧版本的IE，也可以使用CSS样式 border-spacing: 0。

- SLaks

Answer 5

你可能也想添加

table td { border:0; }

以上代码等同于设置 cellpadding="0"。

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

- falc0n

---

Cellpadding是表格内容和其边界之间的空间td{padding:X}。Cellspacing是每个单元格边界之间的空隙（即单元格边框之间的“外边距”）。你可以设置border-collapse来模仿表格标签上的cellspacing属性所做的操作，但这并不是完全可靠的。 - MetalFrog

Answer 6

在尝试了上述建议后，唯一有效的方法是在子主题的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;
}

- Jessica Escobar

Answer 7

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

- Josh Anderson

---

@Josh难道不应该是border: none吗？ - Doug Neiner

@DougNeiner 这是一篇旧帖子，但是 none 和 0 都是同样有效的。我喜欢 0，因为我需要输入的字符更少 :) - Scott Simontis

Answer 8

有时即使清除了边框，问题仍然存在。原因是您在中放置了图像，将图像的display:block设置解决了这个问题。

- bresleveloper