Выделение строки таблицы с чем-то отличным от фонового цвета

Question

Я пытаюсь найти разумный стиль CSS для выделения определенной строки таблицы (т. Е. При выборе щелчка), которая не связана с изменением цвета фона, поскольку цвета строк уже служат цели в моем приложении.

Возможно, это означает, что граница выделяется или что-то делает на фоне, который не меняет цвет. Я пробовал следующие

• border: 2px ... с margin: -2px или что-то в этом роде. Тем не менее, он не отображается слишком хорошо, особенно когда таблица прокручивается и не обеспечивает хорошую подсветку без сверхплоской границы. Браузерная поддержка границ на <tr> элементов также невелика.
• outline: 3px ... только кажется сверху и снизу, когда div, содержащий таблицу, прокручивается.
• box-shadow: 5px 5px ... color insetdoesn't seem to display properly without messing up the table.

Есть ли у кого-нибудь хорошие предложения CSS о том, как этого достичь?

Answer 1

Измените HTML для:

<td style="padding:20px;"> 
    <div class="tdContentWrapper"> 
    <div>SomeStuff</div> 
    <div>SomeMoreStuff</div> 
    </div> 
</td> 

Измените CSS на:

#MyTable .tdContentWrapper:hover{ 
    background: black; 

}

Answer 2

Как об увеличении отступы и/или высоту строки с тонким увеличением шрифта -размер?

Строка подсвечивается достаточно явно, не затрагивая визуальный стиль ее соответствующих сверстников; Я мог бы даже настроить цвет, если это возможно, в зависимости от чередующегося фона.

Answer 3

Оказалось, что вы можете сделать это, используя селектор css на элементах <td>, будучи осторожным с двумя концами. Например, я создал следующий код стилуса, который можно было бы превратить в mixin. Фокус в том, чтобы использовать отрицательное значение spread, чтобы избавиться от границ, которые будут отображаться на любой стороне, которую вы не хотите, при использовании blur и горизонтальных/вертикальных значений, чтобы получить приятный эффект по бокам, которые вы хотите. Значение blur должно составлять не более половины spread.

shadow-color = rgba(0,0,0,0.5) 
shadow = 15px 
-shadow = - shadow 
blur = 5px 
spread = -10px 

tr.selected > td 
    box-shadow: 
     0 shadow blur spread shadow-color inset, 
     0 -shadow blur spread shadow-color inset 

// Since we have to, make the top left and bottom right corners the dark overlapping ones 
tr.selected > td:first-child 
    box-shadow: 
     shadow -shadow blur spread shadow-color inset, 
     0 shadow blur spread shadow-color inset 

tr.selected > td:last-child 
    box-shadow: 
     0 -shadow blur spread shadow-color inset, 
     -shadow shadow blur spread shadow-color inset 

Это создает теневую границу, как в следующем, позволяя любой цвет фона по-прежнему отображаться:

Однако это не возможно сделать это с нормальным (без вставки) box-shadows, потому что они будут отображаться между ячейками таблицы.