| |
|
|
| | Добрый день. Может кто встречался с такой проблемой. Есть таблица, необходимо чтобы ячейки были отделены друг от друга бордером шириной 1 пиксель. И нужно, чтобы при наведении на строку вся строка выделялась бодером сверху и снизу. Вот похожая реализация
<html>
<head>
<style type="text/css">
td {
border: 1px solid black;
}
tr:hover td {
border-top-color: red ! important;
border-bottom-color: red ! important;
}
table {
table-layout: fixed;
border-collapse:collapse;
border-spacing:0;
}
</style>
</head>
<body>
<table>
<tbody >
<tr >
<td>
1 1
</td>
<td>
2 2
</td>
</tr>
<tr>
<td>
1 1
</td>
<td>
2 2
</td>
</tr>
<tr>
<td>
1 1
</td>
<td>
2 2
</td>
</tr>
</tbody>
</table>
</body>
</html>
|
Но есть проблема, только верхняя строка выделяется и сверху и снизу. Зависит это от border-collapse: collapse, меняя на border-collapse: separate, получаю выделение бордером и сверху и снизу, но ширина бордера между ячейками становится 1+1px. Есть вариант задавать в стиле не border: 1px solid, а border-right: 1px solid; border-top: 1px solid; border-bottom: 1px solid; К сожалению, такой вариант не подходит, потому что слишком уж разные таблицы используются и слишком много нужно будет переписать. Может кто сталкивался с такими проблемами. Заранее спасибо. | |
| |
|
