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

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

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

  • border: 2px ... с margin: -2px или что-то в этом роде. Тем не менее, он не слишком хорошо отображается, особенно когда таблица прокручивается, и не предлагает хорошего выделения без очень толстой границы. Браузерная поддержка границ для <tr> элементов также не очень хороша.
  • outline: 3px ... кажется, что отображается только сверху и снизу, когда div, содержащий таблицу, можно прокручивать.
  • box-shadow: 5px 5px ... color inset не отображается должным образом, не испортив таблицу.

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


css border html-table highlight outline
person Andrew Mao    schedule 24.09.2013    source источник

Ответы (3)


arrow_upward
2
arrow_downward

Оказывается, вы можете сделать это, используя css-селекторы на элементах <td>, будьте осторожны с двумя концами. Например, я создал следующий код стилуса, который можно превратить в миксин. Хитрость заключается в том, чтобы использовать отрицательное значение 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-shadow, потому что они будут отображаться между ячейками таблицы.

person Andrew Mao    schedule 24.09.2013

arrow_upward
0
arrow_downward

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

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

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

#MyTable .tdContentWrapper:hover{
  background: black;

}

person George Dodge    schedule 24.09.2013
comment
Я хочу выделить всю строку, а не одну ячейку. - person Andrew Mao; 24.09.2013

arrow_upward
0
arrow_downward

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

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

person Amit G    schedule 24.09.2013