Question

我知道这是一个经常被问到的问题，但我已经尝试了一些解决方案（例如How to make separating lines/borders in a table disappear with CSS?），但我仍然无法得到它。

我已经通过css定义了一个具有交替行颜色的表结构。我希望teh单元格之间的（特别是垂直）边框是不可见的，因此假设我需要零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>

Answer 1

您所描述的可能是cellspacing。如果是这种情况，请在HTML中尝试：

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

Cellspacing是指细胞之间的空间;它不完全是边界。因此，如果您在tds之间看到不可见或无色的空格，请尝试将cellspacing =“0”属性添加到表格标记中。

Answer 2

使用cellspacing="0"确实是摆脱那些讨厌线条的必然方法。但是，就我个人而言，我从来都不喜欢它 - 因为我必须在我在整个网站上创建的每一张桌子中应用它，而不是在一个整洁的集中位置。

所以，我通常会在CSS文件中找到类似elclanrs的解决方案。关于该解决方案的一个很酷的事情是你可以删除它前面的一些标签来为这些标签应用线条/边框。

因此，换句话说，在桌子周围放置一个边框 - 没有在线之间分配所有单元格 - 你可以这样做：

tr, td, th
{
  border: 0;
}

祝你好运！

Answer 3

您也可以使用此风格：

#table1 {border:0px solid transparent;}

Answer 4

试试这个

#table1 {
   border-collapse: collapse;
}

Answer 5

#table1 table, tr, td, th {}错了。

你应该这样做：

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

Answer 6

您似乎正在将样式应用于 table1中的表格。第一个声明应该是：

＃table1 { 边界：0; }

或

table＃table1 { 边界：0; }

Answer 7

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

http://jsfiddle.net/RmhxH/

Answer 8

试试这个：

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

如何使用CSS隐藏表格边框

8 个答案: