Html 去除表格单元格的边框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10131729/
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 border from table cells
提问by user1278496
I know this is a dumb question but I seem to have totally forgotten how to do it.
我知道这是一个愚蠢的问题，但我似乎完全忘记了如何去做。
I have a HTML tableand I want to remove all borders around all the cells so that there is only one border around the entire table.
我有一个 HTML table，我想删除所有单元格周围的所有边框，以便整个表格周围只有一个边框。
My code looks like:
我的代码看起来像：
<table border='1' width='500'>
<tr><th><h1>Your Wheelbarrow</h1></th><tr>
<th>Product</th>
<th>Description</th>
<th>Price</th>
<th>Quantity</th>
<th>Total</th>
<th>Delete</th>
</tr>
回答by brezanac
Just collapse the table borders and remove the borders from table cells (tdelements).
只需折叠表格边框并从表格单元格（td元素）中删除边框。
table {
border: 1px solid #CCC;
border-collapse: collapse;
}
td {
border: none;
}
Without explicitly setting border-collapsecross-browser removal of table cell borders is not guaranteed.
如果没有明确设置border-collapse跨浏览器移除表格单元格边框，则无法保证。
回答by Jukka K. Korpela
The HTML attribute for the purpose is rules=none(to be inserted into the tabletag).
用于此目的的 HTML 属性是rules=none（要插入到table标记中）。
回答by js1568
<style type="text/css">
table {
border:1px solid black;
}
</style>
回答by perfectionist1
Just use your table inside a div with a class (.table1for example) and don't set any border for this table in CSS. Then use CSS code for that class.
只需在带有类的 div 中使用您的表格（.table1例如），并且不要在 CSS 中为该表格设置任何边框。然后使用该类的 CSS 代码。
.table1 {border=1px solid black;}
回答by mikevoermans
You might want to try this: http://jsfiddle.net/QPKVX/
你可能想试试这个：http: //jsfiddle.net/QPKVX/
Not really sure what you want your final layout to look like- but that fixes the colspan problem too.
不太确定您希望最终布局看起来像什么 - 但这也解决了 colspan 问题。
回答by hjpotter92
Change your table declaration to:
将您的表声明更改为：
<table style="border: 1px dashed; width: 500px;">
Here is the sample in action: http://jsfiddle.net/kc48k/
这是正在运行的示例：http: //jsfiddle.net/kc48k/
回答by gumkins
Probably you just needed this CSS rule:
可能你只需要这个 CSS 规则：
table {
border-spacing: 0px;
}
回答by The Codesee
If none of the solutions on this page work and you are having the below issue:
如果此页面上的解决方案均无效，并且您遇到以下问题：
You can simply use this snippet of CSS:
你可以简单地使用这个 CSS 片段：
td {
padding: 0;
}
