TH не переопределяет границу таблицы (CSS+HTML)

Я хочу, чтобы заголовки таблицы имели красную сплошную рамку, а остальная часть таблицы — пунктирную черную рамку.

Используя приведенный ниже код, все правильно, но левая и правая стороны TH отмечены черными точками. Есть ли способ переопределить границы <table> в объявлении стиля TH?

Вот чего я хочу добиться:

http://s13.postimage.org/5bboz4vef/target.png

<style type="text/css">
table {
    border-style:none dotted dotted dotted;
    border-collapse: collapse;
}
table th {
    border: 2px solid red;
}
</style>

<table >
  <thead>
   <tr>
    <th>title 1</th>
    <th>title 2</th>
    <th>title 3</th>
   </tr>
  </thead>
  <tbody>
   <tr>
    <td>text</td>
    <td>text</td>
    <td>text</td>
   </tr>
   <tr>
    <td>text</td>
    <td>text</td>
    <td>text</td>
   </tr>
   <tr>
    <td>text</td>
    <td>text</td>
    <td>text</td>
   </tr>
  </tbody>
</table>

html css border html-table
person Gotenks    schedule 15.07.2012    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Попробуйте это — http://jsfiddle.net/eaTLp/

table {
    border-style:none none dotted;
    border-collapse: collapse;
}

table th {
    border: 2px solid red;
}

table td:first-child {
    border-left: dotted;
}

table td:last-child {
    border-right: dotted;
}
​

Вы даете пунктирную границу только нижней части таблицы. Слева и справа вы выбираете первый и последний <td> в каждой строке с помощью :first-child и :last-child и назначаете им левую и правую границу соответственно.

person Zoltan Toth    schedule 15.07.2012

arrow_upward
2
arrow_downward

Простое решение — установить ширину границы th равной или большей, чем ширина границы table, если это допустимо. Например, добавить

table { border-width: 2px; }

сделать их равными. В вашем примере ширина — это начальное значение medium, которое обычно соответствует 3px или 4px в браузерах.

В противном случае необходима другая стратегия (см. ответ Золтана Тота), стратегия, в которой для элемента table не устанавливается ни левая, ни правая граница.

Причина в том, что в соответствии с правилами [разрешения конфликта границ][1] побеждает более широкая граница (а для границ одинаковой ширины solid побеждает dotted).

person Jukka K. Korpela    schedule 15.07.2012