Тень блока CSS в строке таблицы отображается неправильно - PullRequest
Новая
       18

Тень блока CSS в строке таблицы отображается неправильно

0 голосов
/ 07 марта 2019

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

Вот JSFiddle проблемы. 

<div class="search-table">
<table>
  <tbody>
    <tr>
      <td>A1</td>
      <td>A2</td>
    </tr>
    <tr class="alt">
      <td>B1</td>
      <td>B2</td>
    </tr>
    <tr>
      <td>C1</td>
      <td>C2</td>
    </tr>
    <tr class="alt">
      <td>C1</td>
      <td>C2</td>
    </tr>
  </tbody>
</table>
</div>
<style>
.search-table {
    display: block;
    background-color: #535353;
    font: normal 12px/150% Arial, Helvetica, sans-serif;
    overflow: hidden;
    border: 1px solid #8C8C8C;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}

.search-table a {
    color: #424242;
}

.search-table table {
    border-collapse: collapse;
    text-align: left;
    width: 100%;
    background-color: #ffffff;
}

.search-table table td, .search-table table th {
    padding: 3px 10px;
}

.search-table table thead th {
    background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #8C8C8C), color-stop(1, #7D7D7D) );
    background: -moz-linear-gradient( center top, #8C8C8C 5%, #7D7D7D 100% );
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#8C8C8C', endColorstr='#7D7D7D');
    background-color: #8C8C8C;
    color: #FFFFFF;
    font-size: 15px;
    font-weight: bold;
    border-left: 1px solid #A3A3A3;
}

.search-table table thead th:first-child {
    border: none;
}

.search-table table tbody td {
    color: #424242;
    border-left: 1px solid #DBDBDB;
    font-size: 1.25em;
    font-weight: normal;
    padding: 0.5em;
}

.search-table table tbody tr {
    z-index: 0;
}

.search-table table tbody tr:hover {
    box-shadow: 0px 0px 3px 0px #00000082;
    z-index: 1;
}

.search-table table tbody tr.alt {
    background: #EBEBEB;
    color: #424242;
}

.search-table table tbody td:first-child {
    border-left: none;
}

.search-table table tbody tr:last-child td {
    border-bottom: none;
}
</style>

Как выМожно видеть, что тень блока выглядит так, как и должна при наведении курсора над более темными цветными рядами с помощью класса «alt», но для более светлых цветных рядов она отображает тень только в верхней части строки, а не в нижней.Удаление класса "alt" из 2-го и 4-го рядов исправляет это, но за счет чередования цветов строк.Что вызывает такое поведение, и как я могу это исправить?

1 Ответ

1 голос
/ 07 марта 2019

кажется, что z-index из <tr> нельзя изменить так, как вы хотите, чтобы тень появлялась над строками с цветом фона.

Это несовершенно, но вы могли бы установить цвета BG для <tr> элементов, как вы это делаете в настоящее время, а затем установить наведение box-shadow на внутренних <td> элементах, как это 

.search-table table tbody tr:hover td {
    box-shadow: 0px 0px 3px 0px #00000082;
}

Это не идеально, поскольку внутренние горизонтальные границы между ячейками также получают тени, но может быть возможно установить собственный размер / положение тени для каждой ячейки и применить их.

Другой альтернативой может быть сохранение того, что у вас есть, и использование тени на <tr> следующим образом: 

.search-table table tbody tr:hover {
    box-shadow: inset 0px 0px 3px 0px #00000082;
}

И тогда окончательное комплексное решение может заключаться в использовании некоторого JS для перемещения прозрачного элемента с тенью вокруг и правильного позиционирования и размера при наведении на каждую ячейку.

или ... что я мог сделать, просто изменив цвет BG строки при наведении курсора и забудь о тенях!

...