2010-08-28 3 views
2

Я пытаюсь добавить границы вокруг определенных строк таблицы, которые меняют цвета, когда мышь входит в строку. Тем не менее, я не вижу границы вообще, если не использовать border-collapse:collapse;, но мне нужно избегать крах-краха, так как в некоторых случаях граница видима слева, справа и внизу, но не сверху (вероятно, потому, что я не могу иметь отступы/margin при использовании пограничного краха).Возможно ли иметь границу вокруг строки таблицы каким-то образом?

Есть ли способ достичь этого?

<table style="border-collapse:collapse;"> 
    <tr style="border:1px solid black"> 
    <td>Cell_1</td> 
    <td>Cell_2</td> 
    </tr> 
</table> 
+0

Какой браузер вы используете? Я могу видеть границу с и без _border-collapse: collapse; _ –

ответ

7

Вместо этого вы можете использовать outline.

tr:hover { 
    outline: 1px solid #999; 
} 

Посмотрите: http://jsfiddle.net/dWWkx/3/

+0

Спасибо, это, кажется, было безукоризненно, что я искал. Однако я не вижу границ с Google Chrome, в то время как Firefox 3.6 отображает его, как ожидалось. Strange ... – wdguru

+0

@wdguru Хм ... проблема с контурным свойством заключается в том, что его больше используют как инструмент отладки, чем что-либо еще, поскольку положение границы четко не определено в спецификациях. Возможно, что Webkit не поддерживает наброски на 'tr' - IE 7 и ниже не поддерживает это вообще. Смотрите: http://reference.sitepoint.com/css/outline –

-1

попробовать это:

<table style="">  
    <tr style="display:block;border:1px solid black">  
     <td>Cell_1</td>  
     <td>Cell_2</td>  
    </tr>  
    <tr style="display:block;border:1px solid black">  
     <td>Cell_1</td>  
     <td>Cell_2</td>  
    </tr>  
</table> 
+1

Спасибо, но я пробовал это раньше. Проблема с display: block заключается в том, что строка не растягивается, как это было бы с display: table-row. – wdguru

1

Насколько я знаю, вы не можете поставить границу на строку таблицы, но вы можете на ячейку таблицы (<td>). С некоторыми креативными границами справа и слева направо, с шагом ячейки 0, вы должны иметь возможность добиться появления границы вокруг всей строки.

0

я имел точно такую ​​же проблему и нашел обходной путь:

<tr class="border_bottom"> 

CSS:

tr.border_bottom td { 
    border:1pt solid black; 
} 

Нашел здесь и отрегулировать его: Add border-bottom to table row <tr>

Смежные вопросы