如何使用CSS使表格边框不可见

Question

我知道这是一个常被问到的问题，但我已经尝试了一些解决方案（例如如何使用CSS使表格中的分隔线/边框消失？），但我仍然无法完全解决它。

我通过CSS定义了一个带有交替行颜色的表格结构。我想让单元格之间的（尤其是垂直的）边框不可见，并且假设我需要零个td边框宽度，或者将交替的td边框颜色与背景颜色相同。

下面的示例是我尝试过的内容，在从HTML调用table1 ID时，我得到了一个漂亮的交替着颜色的行表格，但是明显还有单元格边框-感谢您的帮助。

#table1 table, tr, td, th {
     border: 0;
}

#table1 tbody tr:nth-child(odd) {
     background-color: #A3B9D2; 
}

#table1 tbody tr:nth-child(even) {
     background-color: #E7EDF3;
}

然后是示例HTML代码：

<table id="table1" >
   <tr>
     <td>Test</td><td>(value)</td>
   </tr>
   <tr>
     <td>Test2</td><td>(value2)</td>
   </tr>
</table>

- vinomarky

---

我相信你是正确的 - 那么在定义列元素之间零边框厚度的正确方法是什么呢？我尝试过 table、tr、td、th {border:0;} 但没有 #table1 这个，也没能奏效。我还尝试在每个交替颜色部分中放置 border:0; 但也没有成功。由于我对 CSS 不是很熟悉，所以希望有人可以帮帮我。;-) - vinomarky

Answer 1

您所描述的可能是单元格之间的间距。如果是这种情况，请在您的 HTML 中尝试以下内容：

<table cellpadding="0" cellspacing="0" border="0">
  ...
</table>

Cellspacing指的是单元格之间的空隙；它不是一个边框。如果您在td之间看到无形或非彩色的空白，请尝试将cellspacing="0"属性添加到您的表格标记中。

- Tracy Fu

---

太好了 - 非常感谢Tracy。也感谢其他所有提供了很好建议并帮助这个可怜的CSS原始人的人们;-) - vinomarky

哎呀，这是我在 Stack 上的第一个被接受的答案 :) 谢谢！ - Tracy Fu

Answer 2

您也可以使用以下样式：

#table1 {border:0px solid transparent;} 

- TheGeekYouNeed

Answer 3

试试这个

#table1 {
   border-collapse: collapse;
}

- NewUser

Answer 4

使用 cellspacing="0" 确实是一种去除那些讨厌的线条的有效方法。但是，个人而言，我从来不喜欢它——因为我必须在每个创建的表格中都应用它，而不是在一个整洁、集中的地方应用。

因此，我通常选择像 elclanrs 的 CSS 文件中的解决方案。这个解决方案的酷之处在于，你可以删除一些位于其前面的标签，以仅对这些标签应用线条/边框。

换句话说，要在表格周围加上边框——而不是将所有单元格分配给线条——你可以像这样做：

tr, td, th
{
  border: 0;
}

祝你好运！

- Jeff Mahoney

Answer 5

#table1 table, tr, td, th {} 是错误的。

你应该这样做：

#table1,
#table1 tr,
#table1 td { border: 0; }

- elclanrs

---

谢谢 - 我尝试过了，但是没有成功，边框仍然存在（像缺少颜色条而不是实心颜色边框）。 - vinomarky

尝试使用其他人发布的cellpadding解决方案。 - elclanrs

Answer 6

试试这个：

table,td,tr,th{
  border:0;
}

- Sriram Sundarajan

Answer 7

看起来你正在将样式应用于table1中的表格内部。第一个声明实际上应该是：

#table1 { border: 0; }

或者

table #table1 { border: 0; }

- Christophe

Answer 8

你用的是什么浏览器？为了完全向后兼容，你仍然需要在表格上设置cellspacing="0"属性。

http://jsfiddle.net/RmhxH/

- Ricardo Tomasi