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