Html 使用 CSS 删除不需要的表格单元格边框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2039438/
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
Removing unwanted table cell borders with CSS
提问by Bob
I have a peculiar and frustrating problem. For the simple markup:
我有一个奇怪而令人沮丧的问题。对于简单的标记：
<table>
<thead>
<tr><th>1</th><th>2</th><th>3</th></tr>
</thead>
<tbody>
<tr><td>a</td><td>b></td><td>c</td></tr>
<tr class='odd'><td>x</td><td>y</td><td>z</td></tr>
</tbody>
</table>
I apply different background-color values to the thead, tr, and trodd elements. The problem is that in most browsers, every cell has an unwanted border which is not the color of any of the table rows. Only in Firefox 3.5 does the table have no borders in any cell.
我将不同的背景颜色值应用于thead、tr和tr奇数元素。问题是在大多数浏览器中，每个单元格都有一个不需要的边框，它不是任何表格行的颜色。只有在 Firefox 3.5 中，表格在任何单元格中都没有边框。
I'd just like to know how to remove these borders in the other major browsers so that the only thing you see in the table are the alternating row colors.
我只想知道如何在其他主要浏览器中删除这些边框，以便您在表格中看到的唯一内容是交替的行颜色。
回答by Doug Neiner
You need to add this to your CSS:
您需要将此添加到您的 CSS：
table { border-collapse:collapse }
回答by Gabriel McAdams
Modify your HTML like this:
像这样修改你的 HTML：
<table border="0" cellpadding="0" cellspacing="0">
<thead>
<tr><td>1</td><td>2</td><td>3</td></tr>
</thead>
<tbody>
<tr><td>a</td><td>b></td><td>c</td></tr>
<tr class='odd'><td>x</td><td>y</td><td>z</td></tr>
</tbody>
</table>
(I added border="0" cellpadding="0" cellspacing="0")
（我加了border="0" cellpadding="0" cellspacing="0"）
In CSS, you could do the following:
在 CSS 中，您可以执行以下操作：
table {
border-collapse: collapse;
}
回答by Dave Markle
add some css:
添加一些CSS：
td, th {
border:none;
}
回答by Amine_Dev
to remove the border , juste using css like this :
删除边框，juste 使用 css 像这样：
td {
border-style : hidden!important;
}
回答by SLaks
Set the cellspacingattribute of the table to 0.
将cellspacing表的属性设置为0。
You can also use the CSS style, border-spacing: 0, but only if you don't need to support older versions of IE.
您也可以使用 CSS 样式，border-spacing: 0但前提是您不需要支持旧版本的 IE。
回答by falc0n
You may also want to add
您可能还想添加
table td { border:0; }
the above is equivalent to setting cellpadding="0"
以上相当于设置cellpadding="0"
it gets rid of the padding automatically added to cells by browsers which may depend on doctype and/or any CSS used to reset default browser styles
它摆脱了浏览器自动添加到单元格的填充，这可能取决于文档类型和/或用于重置默认浏览器样式的任何 CSS
回答by Jessica Escobar
After trying the above suggestions, the only thing that worked for me was changing the border attribute to "0" in the following sections of a child theme's style.css (do a "Find" operation to locate each one -- the following are just snippets):
在尝试了上述建议后，唯一对我有用的是在子主题的 style.css 的以下部分中将边框属性更改为“0”（执行“查找”操作以定位每个 - 以下只是片段）：
.comment-content table {
border-bottom: 1px solid #ddd;
.comment-content td {
border-top: 1px solid #ddd;
padding: 6px 10px 6px 0;
}
Thus looking like this afterwards:
之后看起来像这样：
.comment-content table {
border-bottom: 0;
.comment-content td {
border-top: 0;
padding: 6px 10px 6px 0;
}
回答by Josh Anderson
Try assigning the style of border: 0px; border-collapse: collapse;to the table element.
尝试将 的样式分配给border: 0px; border-collapse: collapse;表格元素。
回答by bresleveloper
sometimes even after clearing borders.
有时甚至在清除borders 之后。
the reason is that you have images inside the td, giving the images display:blocksolves it.
原因是你在里面有图像td，给图像display:block解决它。
