Почему граница <th> и <thead> оба не показывающие здесь?
3 ответа
Это ожидаемое поведение. Странно, но ожидаемо.
Границы схлопываются , причем преобладает более толстая.
Вы можете увидеть это на следующем примере: соприкасающиеся границы в первой строке сворачиваются, а во второй - нет.
В первой строке первая ячейка получает более толстую границу (10 пикселей зеленый> 5 пикселей красный), а вторая ячейка получает более толстую границу (5 пикселей красный> 3 пикселей зеленый).
Во втором ряду нет "смежных" границ, которые можно было бы свернуть, поэтому зеленые границы 10 пикселей и 3 пикселя отображаются нормально.
<table>
<thead style="border-top:5px solid red; background:yellow">
<tr>
<th style="border-top:10px solid green">Name</th>
<th style="border-top:3px solid green">Name</th>
</tr>
<tr>
<th style="border-top:10px solid green">Name</th>
<th style="border-top:3px solid green">Name</th>
</tr>
</thead>
</table>
Мне все равно нужно прояснить объяснение?
PS: теоретически вы могли бы использовать свойство border-collapse в таблице, чтобы предотвратить это, но я не справляюсь.
Кроме того, кажется, что значение по умолчанию не сворачиваться.
Дополнительная литература: http://www.w3.org/TR/CSS2/tables.html#borders
Дайте имя класса вашей таблице. И задайте стиль, как показано ниже
<style>
.mytable thead{
//your style goes here
}
</style>
РЕДАКТИРОВАТЬ:
<table>
<thead style="border-top:10px solid red; background:yellow">
<tr><th style="border-left:10px solid green">Name</th></tr>
</thead>
<tbody>
<tr><td>Bob</td></tr>
<tr><td>Tom</td></tr>
</tbody>
</table>
Попробуйте этот код. Показаны границы thead и th. Может быть, th имеет больший приоритет, если существует одинаковый конфликт атрибутов стиля между th и thead
Вы можете использовать элемент Вы можете увидеть здесь пример в качестве селектора следующим образом:
thead { background: red; }
Похожие вопросы: