我尝试删除 Table1Header 和 Table2Header 之间的空白。我尝试了 border:0px、padding:0px 和 border-spacing:0px;风格。 Firefox 和 Opera 告诉我,我的边框间距样式被用户代理样式(2px)覆盖。如何强制浏览器使用我的 styleshits?
http://jsfiddle.net/cdjDR/2/ http://jsfiddle.net/cdjDR/2/
<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;
is fine
table { /* Will apply to all tables */
border-spacing: 0;
/* OR border-collapse: collapse; */
}
Demo http://jsfiddle.net/cdjDR/4/
您可以使用简单的元素选择器轻松覆盖 useragent 样式表。
如果你想标准化样式,你应该使用CSS重置 http://meyerweb.com/eric/tools/css/reset/
来到你的选择器,这对我来说似乎很脏,因为你的目标是表class
.tableGroup
和table
嵌套在它下面
table.tableGroup, table.tableGroup > tr > td > table {
border-spacing: 0px;
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)