Html 如何使用 CSS 使表格边框不可见
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9188195/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make table borders invisible with CSS
提问by vinomarky
I know this is an oft asked question, but I've tried some of the solutions (such as How to make separating lines/borders in a table disappear with CSS?) but I still can't quite get it.
我知道这是一个经常被问到的问题，但我已经尝试了一些解决方案（例如如何使用 CSS 使表格中的分隔线/边框消失？）但我仍然不太明白。
I have defined via css a table structure with alternating row colors. I'd like the (in particular vertical) borders between teh cells to be invisible and so suppose I either need a zero td border width, or the alternating td border colors to be the same as the background colors.
我通过 css 定义了一个具有交替行颜色的表结构。我希望单元格之间的（特别是垂直）边界不可见，因此假设我需要零 td 边框宽度，或者交替的 td 边框颜色与背景颜色相同。
Example below is what I've tried, in calling a table1 id from html, I get a nice alternating colored row table but with obvious cell borders still - appreciate your help.
下面的示例是我尝试过的，在从 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;
}
and then sample html;
然后采样html；
<table id="table1" >
<tr>
<td>Test</td><td>(value)</td>
</tr>
<tr>
<td>Test2</td><td>(value2)</td>
</tr>
</table>
回答by Tracy Fu
It's possible that what you're describing is cellspacing. If that's the case try this in your HTML:
您所描述的可能是单元格间距。如果是这种情况，请在您的 HTML 中尝试此操作：
<table cellpadding="0" cellspacing="0" border="0">
...
</table>
Cellspacing refers to the space between cells; it's not a border exactly. So, if you're seeing invisible or non-colored spaces between your tds, try adding the cellspacing="0" attribute to your table tag.
Cellspacing是指单元格之间的空间；这不是一个确切的边界。因此，如果您在 tds 之间看到不可见或非彩色的空间，请尝试将 cellpacing="0" 属性添加到您的表格标记中。
回答by TheGeekYouNeed
You can also use this style:
你也可以使用这种风格：
#table1 {border:0px solid transparent;}
回答by Jeff Mahoney
Using cellspacing="0"is indeed a sure-fire way to get rid of those pesky lines. But, personally, I've never liked it - because I have to apply it in each and every table that I create throughout a site, instead of in one neat, centralized spot.
使用cellspacing="0"确实是摆脱那些讨厌的线条的可靠方法。但是，就我个人而言，我从不喜欢它——因为我必须将它应用到我在整个站点中创建的每一个表中，而不是在一个整洁、集中的地方。
So, I usually go for a solution like elclanrs's in a CSS file. The cool thing about that solution is that you can remove some of the tags ahead of it to apply lines/borders for just those.
所以，我通常会在 CSS 文件中寻找像 elclanrs 这样的解决方案。该解决方案很酷的一点是，您可以删除它前面的一些标签，以便为这些标签应用线条/边框。
So, in other words, to put a border around a table - without having all of the cells divvied up between lines too - you can do something like this:
因此，换句话说，要在表格周围放置边框 - 无需将所有单元格也分成几行 - 您可以执行以下操作：
tr, td, th
{
border: 0;
}
Good luck!
祝你好运！
回答by NewUser
Try this
尝试这个
#table1 {
border-collapse: collapse;
}
回答by elclanrs
#table1 table, tr, td, th {}is wrong.
#table1 table, tr, td, th {}是错的。
You should do:
你应该做：
#table1,
#table1 tr,
#table1 td { border: 0; }
回答by Christophe
It seems that you are applying the style to tables withintable1. The first declaration should actually be:
看来，要应用的样式表内表1。第一个声明实际上应该是：
#table1 { border: 0; }
#table1 { 边框：0; }
or
或者
table #table1 { border: 0; }
table #table1 { 边框：0; }
回答by Ricardo Tomasi
What browser are you using? For complete backwards compatibility you still need the cellspacing="0"attribute set on the table.
你使用的是什么浏览器？为了完全向后兼容，您仍然需要cellspacing="0"在表上设置属性。
回答by Sriram Sundarajan
Try this:
尝试这个：
table,td,tr,th{
border:0;
}
