Как удалить пробелы между ячейками в таблице HTML
Я пытаюсь удалить пробел между Table1Header и Table2Header. Я попробовал border:0px, padding:0px и border-spacing: 0px; стили. Firefox и Opera говорят мне, что мой стиль интервала между границами переопределен стилем агента пользователя (который является 2px). Как я могу заставить браузер использовать мои styleshits?
<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;
}
4 ответов
браузеры не говорят вам, что ваш border-spacing style переопределяется таблицей стилей агента пользователя. Вместо этого они могут указывать, что наследование не происходит для него. Это просто вызвано тем, что некоторые таблица стилей задает свойство элемента.
причина, по которой ваше правило не применяется к внутреннему table элемент заключается в том, что он не соответствует ни одному из ваших селекторов. Селектор
table.tableGroup > tr > td > table
не соответствовать ей, потому что tr элемент никогда не является дочерним table даже если может показаться. По синтаксису HTML существует промежуточное tbody элемент, даже если его начальный и конечный тег отсутствуют. Следующий селектор будет соответствовать:
table.tableGroup > tbody > tr > td > table
конечно, просто table селектор также выполнит эту работу, при условии, что вы хотите все table элементы, которые будут стилизованы по правилу.
вы можете просто использовать border-collapse: collapse; или даже border-spacing: 0; нормально
table { /* Will apply to all tables */
border-spacing: 0;
/* OR border-collapse: collapse; */
}
вы можете легко переопределить таблицу стилей useragent с помощью простого селектора элементов.
если вы хотите нормализовать стили, вы должны использовать сброс CSS
подходит к вашему селектору, который кажется мне грязным, так как yo нацелены на таблицу с class .tableGroup и table вложены в это
table.tableGroup, table.tableGroup > tr > td > table {
border-spacing: 0px;
}
лучше использовать
table.tableGroup,
table.tableGroup table {
border-spacing: 0;
}
вам нужно добавить (border=" 0 "cellpadding=" 0 "cellspacing= "0") табличные дань в каждом теге таблицы
пример
<table border="0" cellpadding="0" cellspacing="0">
*пример с ваших классах *
<table border="0" cellpadding="0" cellspacing="0" class="tableGroup">