Почему границы <th>и <thead>и здесь не отображаются?

Question

Почему обе границы не отображаются?

http://jsfiddle.net/r8mA7/

<table>
<thead style="border-top:10px solid red; background:yellow">
    <tr><th style="border-top:10px solid green">Name</th></tr>
</thead>
<tbody>
    <tr><td>Bob</td></tr>
    <tr><td>Tom</td></tr>
</tbody>
</table>

Answer 1

Это ожидаемое поведение. Странно, но ожидаемо.
Границы рушатся , а более толстый преобладает.

Вы можете увидеть это на следующем примере: соприкасающиеся границы в первом ряду сжимаются, а во втором - нет.
В первом ряду первая ячейка получает более толстую границу (10 пикселей зеленого цвета> 5 пикселей красного), а вторая ячейка получает более толстую границу (5 пикселей красного цвета> 3 пикселя зеленого цвета). Во втором ряду нет «примыкающих» границ, которые можно свернуть, поэтому зеленые границы размером 10px и 3px отображаются нормально.

<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

Answer 2

Вы можете использовать элемент <thead> в качестве селектора следующим образом:

thead { background: red; }

Пример можно посмотреть здесь

Answer 3

Дайте название класса вашей таблице. И стиль это как ниже

<style>
.mytable thead{
//your style goes here
}


</style>

EDIT:

<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 существует один и тот же конфликт атрибутов стиля