如何使表格边框隐藏与CSS

问题描述：

我知道这是一个常见问题，但我已经尝试了一些解决方案（如How to make separating lines/borders in a table disappear with CSS?），但我仍然无法完全理解。如何使表格边框隐藏与CSS

我已经通过css定义了交替行颜色的表结构。我希望特殊的单元格之间的边界（特别是垂直）不可见，因此假设我要么需要零边界宽度，要么交替边界的颜色与背景颜色相同。

以下示例是我尝试过的，在从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>

我敢肯定你是对的 - 什么是正确的做法，然后定义列元素之间的零层边框厚度的？我尝试过table，tr，td，th {border：0;} 没有＃table1，它也没有工作。我也试过把边界：0;在每个交替的颜色部分没有运气。没有加速CSS，我希望有人会怜惜我;-) ; – vinomarky 2012-02-08 05:25:26

答

这有可能正是你所描述的是CELLSPACING。如果是这种情况，请在您的HTML中尝试以下代码：

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

Cellspacing指的是单元格之间的空间;这完全不是一个边界。因此，如果您看到tds之间有无形或无色的空间，请尝试在您的表格标记中添加cellspacing =“0”属性。

完美 - 感谢一群特雷西。感谢所有提供了很好的建议并帮助这个可怜的CSS neanderthal的人;-) – vinomarky 2012-02-08 05:42:07

Yay。那是我第一次接受Stack的答案:)谢谢！ – 2012-02-08 05:44:12

答

看来你是表1中应用样式到表。第一个声明实际上应该是：

＃table1 { border：0; }

或

表＃table1的{ 边界：0; }

答

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

你应该这样做：

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

谢谢 - 尝试它没有运气，边框仍然存在（如在缺少颜色条而不是纯色边框） – vinomarky 2012-02-08 05:37:08

尝试使用其他人发布的cellpadding解决方案。 – elclanrs 2012-02-08 05:38:00

答

您也可以使用这种风格：

#table1 {border:0px solid transparent;}

答

试试这个

#table1 { 
    border-collapse: collapse; 
}

答

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

http://jsfiddle.net/RmhxH/

答

使用cellspacing="0"确实是一个安全可靠的方式来摆脱那些烦人的线。但是，我个人从来都不喜欢它 - 因为我必须将其应用于我在整个网站创建的每张桌子上，而不是放在一个整洁，集中的地方。

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

所以，换句话说，把边框围着一张桌子 - 不必太行之间瓜分细胞的 - 你可以这样做：

tr, td, th 
{ 
    border: 0; 
}

祝你好运！

答

试试这个：

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

如何使表格边框隐藏与CSS

相关推荐