2010-04-08 2 views
32

CSSПочему TR не берет стиль?

table tr {border-bottom:1px solid #008999} 

HTML

<table width="100%" cellspacing="0" cellpadding="0"> 
    <thead> 
     <tr> 
     <th scope="col">one</th> 
     <th scope="col">two</th> 
     <th scope="col">three</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
     <th scope="row">Hello</th> 
     <td>&nbsp;</td> 
     <td>&nbsp;</td> 
     </tr> 
    </tbody> 
</table> 
+0

Дубликаты: http://stackoverflow.com/questions/670424/border-around-specific-rows-in-a-table Http: // StackOverflow. com/questions/583539/set-border-to-table-tr-works-in-all-except-ie-6-7 http://stackoverflow.com/questions/2238174/border-bottom-for-ie-is -not-working-in-tr –

ответ

42

Добавить:

table 
{ 
    border-collapse: collapse; 
} 

В противном случае trcreates no single block.

Простой пример:

table 
 
{ 
 
    border: 5px solid #900; 
 
    background: #fff; 
 
} 
 
tr 
 
{ 
 
    border: 5px solid #090; 
 
} 
 
td 
 
{ 
 
    background: #ccc; 
 
    padding: 5px 0; 
 
} 
 

 
table + table 
 
{ 
 
    border-collapse: collapse; 
 
}
<table> 
 
    <tr> 
 
    <td>def</td> 
 
    <td>ault</td> 
 
    </tr> 
 
</table> 
 
<table> 
 
    <tr> 
 
    <td>coll</td> 
 
    <td>apse</td> 
 
    </tr> 
 
</table>

+0

Прежде всего, вы нашли решение, поэтому я принимаю ваш ответ –

+0

Почему он должен быть свернут? @toscho – Cullub

+0

@cullub Посмотрите предложение под блоком кода? – fuxia

8

Попробуйте дать

table tr th {border-bottom:1px solid #008999} 

Тогда вы можете использовать

table { border-collapse: collapse; } 
table tr {border-bottom:1px solid #008999; } 

См The collapsing border model

+0

Мне нужно на tr не –

+0

@ metal-gear-solid: Что именно вы пытаетесь достичь? Можете ли вы описать визуальный результат, который хотите увидеть? –

+0

@raul - см. Эту таблицу tr {border-bottom: 1px solid # 008999} 'означает, что каждый' TR' в 'table' должен иметь границу с' 1px' height 'solid' и в этом цвете' # 008999'. То, что не ясно? –

2

тр по определению не займет стили границ. Вы должны применить его к ТД в нем:

table tr td {border-bottom:1px solid #008999} 
Смежные вопросы