我尝试删除 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;
}
最佳答案
您可以简单地使用 border-collapse: collapse;
甚至 border-spacing: 0;
都可以
table { /* Will apply to all tables */
border-spacing: 0;
/* OR border-collapse: collapse; */
}
您可以使用简单的元素选择器轻松覆盖用户代理样式表。
如果你想标准化样式,你应该使用CSS Reset
来到你的选择器,这对我来说似乎很脏,因为你的目标是 class
.tableGroup
和 table
嵌套在下面那个
table.tableGroup, table.tableGroup > tr > td > table {
border-spacing: 0px;
}
所以你最好使用
table.tableGroup,
table.tableGroup table {
border-spacing: 0;
}
关于html - 如何删除html表格中单元格之间的空格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21108708/