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

【问题标题】：How to make table borders invisible with CSS如何使用 CSS 使表格边框不可见
【发布时间】：2012-02-29 14:03:22
【问题描述】：

我知道这是一个经常被问到的问题，但我已经尝试了一些解决方案（例如 How to make separating lines/borders in a table disappear with 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>

【问题讨论】：

我相信你是对的 - 那么在列元素之间定义零边框厚度的正确方法是什么？我试过不带 #table1 的 table, tr, td, th {border: 0;} 也没有用。我也试过把边界：0;在每个交替的颜色部分没有运气。没有跟上 CSS 我希望有人会同情我 ;-) ;

标签： html css html-table

【解决方案1】：

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

#table1 { 边框：0； }

或

表#table1 { 边框：0； }

【讨论】：

【解决方案2】：

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

你应该这样做：

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

【讨论】：

谢谢 - 没有运气，但仍然存在边框（因为没有彩条而不是纯色边框）
尝试其他人发布的单元格填充解决方案。

【解决方案3】：

你也可以使用这种风格：

#table1 {border:0px solid transparent;}

【讨论】：

【解决方案4】：

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

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

Cellspacing是指单元格之间的间距；它不完全是边界。因此，如果您在 td 之间看到不可见或非彩色空格，请尝试将 cellspacing="0" 属性添加到表格标签中。

【讨论】：

完美 - 非常感谢特蕾西。感谢其他所有提供了很好的建议并帮助了这个可怜的 CSS 尼安德特人的人 ;-)
是的。这是我在 Stack 上第一个接受的答案 :) 谢谢！

【解决方案5】：

试试这个

#table1 {
   border-collapse: collapse;
}

【讨论】：

【解决方案6】：

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

http://jsfiddle.net/RmhxH/

【讨论】：

【解决方案7】：

使用cellspacing="0" 确实是摆脱那些讨厌的线条的可靠方法。但是，就我个人而言，我从来不喜欢它——因为我必须将它应用到我在整个网站中创建的每一个表中，而不是在一个整洁、集中的位置。

所以，我通常会在 CSS 文件中寻找像 elclanrs 这样的解决方案。该解决方案最酷的地方在于，您可以删除它前面的一些标签，以便为这些标签应用线条/边框。

因此，换句话说，要在表格周围设置边框 - 也无需将所有单元格在行之间划分 - 您可以执行以下操作：

tr, td, th
{
  border: 0;
}

祝你好运！

【讨论】：

【解决方案8】：

试试这个：

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

【讨论】：