Html 如何删除html表格中单元格之间的空格
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21108708/
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 remove spaces between cells in a html table
提问by user3193136
I try to remove white space between Table1Header and Table2Header. I tried border:0px, padding:0px and border-spacing:0px; styles. Firefox and Opera tell me that my border-spacing style is overrided by the user agent style (which is 2px). How can I force browser to use my styleshits?
我尝试删除 Table1Header 和 Table2Header 之间的空白。我试过 border:0px, padding:0px 和 border-spacing:0px; 样式。Firefox 和 Opera 告诉我，我的边框间距样式被用户代理样式（即 2px）覆盖。如何强制浏览器使用我的样式？
<table class="tableGroup">
<tbody>
<tr>
<td>
<table>
<tbody>
<tr class="tableHeader">
<td><span class="tableHeader"><label>Table1Header</label></span>
</td>
</tr>
<tr class=" tableData">
<td>
<div class="ui-datatable">
<div>
<table>
<thead>
<tr>
<th>
<div><span><span class="ui-header-text">Table1Col1</span></span>
</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td><span>2</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</td>
<td>
<table>
<tbody>
<tr class="tableHeader">
<td><span class="tableHeader"><label>Table2Header</label></span>
</td>
</tr>
<tr class="tableData">
<td>
<div class="ui-datatable">
<div>
<table>
<thead>
<tr>
<th>
<div><span><span class="ui-header-text" >Table2Col1</span></span>
</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td><span>12345</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
span.tableHeader > label {
display: inline-block;
float:left;
line-height:30px;
padding-left:10px;
color: #202020;
font-size: 13px;
}
tr.tableHeader {
background-color: #EEEEEE;
}
table.tableGroup, table.tableGroup > tr > td > table {
border-spacing: 0px;
}
table.tableGroup div.ui-datatable th > div > span >span.ui-header-text {
color: #808080;
font-size: 11px;
}
table.tableGroup td, table.tableGroup th {
padding: 0px;
border: 0px;
}
采纳答案by Jukka K. Korpela
The browsers are not telling you that your border-spacingstyle is overridden by the user agent style sheet. Instead, they may indicate that inheritance does not take placefor it. This is simply caused by the fact that somestyle sheet sets the property on the element.
浏览器不会告诉您您的border-spacing样式已被用户代理样式表覆盖。相反，它们可能表明继承不会发生。这仅仅是由于某些样式表在元素上设置了属性这一事实造成的。
The reason why your rule is not applied to the inner tableelement is that it does not match any of your selectors. The selector
您的规则未应用于内部table元素的原因是它与您的任何选择器都不匹配。选择器
table.tableGroup > tr > td > table
does not match it, because a trelement is never a child of tableeven if might appear to be. By HTML syntax, there is an intervening tbodyelement, even if its start and end tag are missing. The following selector would match:
不匹配，因为一个tr元素永远不会是table即使可能看起来是的子元素。根据 HTML 语法，tbody即使缺少开始和结束标记，也存在中间元素。以下选择器将匹配：
table.tableGroup > tbody > tr > td > table
Of course, a mere tableselector would do the job as well, provided that you want all tableelements to be styled by the rule.
当然，table如果您希望所有table元素都按照规则设置样式，那么单纯的选择器也可以完成这项工作。
回答by Mr. Alien
You can simply use border-collapse: collapse;or even border-spacing: 0;is fine
你可以简单地使用border-collapse: collapse;甚至border-spacing: 0;很好
table { /* Will apply to all tables */
border-spacing: 0;
/* OR border-collapse: collapse; */
}
You can easily override the useragent stylesheet with a simple element selector.
您可以使用简单的元素选择器轻松覆盖用户代理样式表。
If you want to normalize the styles, you should use CSS Reset
如果你想规范化样式，你应该使用CSS Reset
Coming to your selector which is seems dirty to me, as yo are targeting the table with class.tableGroupand the tablenested under that
来到你的选择器，这对我来说似乎很脏，因为你的目标是表格，class.tableGroup并且table嵌套在它下面
table.tableGroup, table.tableGroup > tr > td > table {
border-spacing: 0px;
}
table.tableGroup, table.tableGroup > tr > td > table {
border-spacing: 0px;
}
So you better use
所以你最好用
table.tableGroup,
table.tableGroup table {
border-spacing: 0;
}
回答by fahd4007
you need to add (border="0" cellpadding="0" cellspacing="0") Table tributes in every table tag
您需要在每个表格标签中添加 (border="0" cellpadding="0" cellspacing="0") 表格致敬
example
例子
<table border="0" cellpadding="0" cellspacing="0">
*example with your classes *
*以您的课程为例 *
<table border="0" cellpadding="0" cellspacing="0" class="tableGroup">
