Поле тени на строке таблицы не отображается в некоторых браузерах

CSS box-shadow для строк таблицы -tr - похоже, не работает согласованно во всех браузерах. В некоторых браузерах отображается тень; на других нет тени.

Я использую следующий CSS:

tr {
  background-color: rgb(165, 182, 229);
  box-shadow: 0px 2px 2px black;
  -moz-box-shadow: 0px 2px 2px black;
  -webkit-box-shadow: 0px 2px 2px black;
}
td, th {
  padding: 5px;
  text-align: left;
}

ВотjsFiddle нижеприведенного фрагмента:

tr {
  background-color: rgb(165, 182, 229);
  box-shadow: 0px 2px 2px black;
  -moz-box-shadow: 0px 2px 2px black, ;
  -webkit-box-shadow: 0px 2px 2px black;
}
td, th {
  padding: 5px;
  text-align: left;
}
<table>
  <tr>
    <td>&nbsp;</td>
    <th>One</th>
    <th>Two</th>
  </tr>
  <tr>
    <th>Title</th>
    <td>Three</td>
    <td>Four</td>
  </tr>
  <tr>
    <th>Title2</th>
    <td>Five</td>
    <td>Six</td>
  </tr>
  <tr>
    <th>Title3</th>
    <td>Seven</td>
    <td>Eight</td>
  </tr>
  <tr>
    <th>Title4</th>
    <td>Nine</td>
    <td>Ten</td>
  </tr>
</table>

Note: Такое же поведение наблюдается при замене<tr> с<div> и добавлениеdisplay: table-row.

Ответы на вопрос(8)

<tr></tr>!

CSS / HTML / Demo

table {
  border-spacing: 0 10px;
  border-collapse: separate;
} 
tbody {
  display: table-row-group;
  vertical-align: middle;
}
tr {
  margin-bottom: 9px;
}
tr:hover {
      box-shadow: 0 5px 8px 0 rgba(50, 50, 50, 0.35);
    -webkit-box-shadow: 0 5px 8px 0 rgba(50, 50, 50, 0.35);
    -moz-box-shadow: 0 5px 8px 0 rgba(50, 50, 50, 0.35);
}
<table class="table">
  <caption>Optional table caption.</caption>
  <thead> 
    <tr> 
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr> 
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

 28 сент. 2016 г., 06:47
 29 сент. 2016 г., 01:32
Вау, это правильно !! Спасибо огромное чувак! Я бы дал тебе дополнительный голос, если бы мог. Я не использовал префикс -webkit-, глупый я. Вы должны связать скрипку на своем посту
 27 сент. 2016 г., 05:56
Хм ... сегодня я напишу рабочий пример и разместлю ссылку на него, но позже.
 27 сент. 2016 г., 17:16
Это было бы проблемой. Я действительно не могу заставить это работать. Он отлично работает на ffox, но не в chrome. Спасибо
 23 сент. 2016 г., 22:45
Я имею в виду, якобы я вижу, что ошибка была помечена как & quot; исправлена & quot; но я все еще не вижу правильного рендеринга на моей машине = (

i have combined the answer as below. It worked fine in chrome, >firefox, ie11

.select_row{
    color: #43B149;
    font-weight: bolder !important;
    background: #e4e5e6 !important;
    box-shadow: 1px 0px 1px 0px #cad6ce !important;
    -moz-box-shadow:1px 0px 1px 0px #cad6ce !important;
    -webkit-box-shadow:1px 0px 1px 0px #cad6ce !important;
    transform: scale(1);
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    td{box-shadow: 0px 3px 0px 0px #cad6ce !important;
        -moz-box-shadow:0px 3px 0px 0px #cad6ce !important;
        -webkit-box-shadow:0px 3px 0px 0px #cad6ce !important;
        background: #e4e5e6 !important;
    }
}
.table-forecast{
    border-collapse: separate;
    border-spacing: 0px;
}
Решение Вопроса

box-shadow свойство работает только с элементами, которые имеютdisplay: block или жеdisplay:inline-block имущество.

Если вы добавитеdisplay: block к ячейке таблицы как общему правилу стиля, она будет разрушена, так как автоматические пропорции ширины / высоты, которые имели ячейки сdisplay:table больше не будет применяться. Для имитации этого поведения просто назначьтеmin-width приписывать каждомуth а такжеtd.

Тогда подать заявкуbox-shadow в ряд (при наведении или без).

В итоге ваш код должен выглядеть так:

table { box-sizing: border-box; }
td, th { padding-left: 16px; min-width: 170px; text-align: left; }
tr { display: block; }
tr:hover { box-shadow: 0px 2px 18px 0px rgba(0,0,0,0.5); cursor: pointer; }

Я упустил префиксы поставщиков для простоты.

Вот полный пример:

table {
  box-sizing: border-box;
  border-bottom: 1px solid #e8e8e8;
}
td,
th {
  padding-left: 16px;
  min-width: 170px;
  border: 1px solid #e8e8e8;
  border-bottom: none;
  font: 14px/40px;
  text-align: left;
}
td {
  color: #666;
}
tr {
  display: block;
}
th {
  color: #333;
}
tr:hover {
  background-color: #fbfbfb;
  box-shadow: 0px 2px 18px 0px rgba(0, 0, 0, 0.5);
  cursor: pointer;
}
<table cellpadding="0" cellspacing="0">
  <thead>
    <tr>
      <th>Phone number</th>
      <th>Date</th>
      <th>Name</th>
      <th>Label</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>0342443</td>
      <td>10 August 2013</td>
      <td>Kate</td>
      <td>Loves cats</td>
      </td>
      <tr>
        <td>0342442</td>
        <td>9 August 2013</td>
        <td>Mary</td>
        <td>Boring</td>
      </tr>
      <tr>
        <td>0342441</td>
        <td>8 August 2013</td>
        <td>Anna</td>
        <td>Loves extreme stuff</td>
      </tr>
  </tbody>
</table>

Вы также можетепроверить скрипку здесь.

 04 авг. 2015 г., 15:44
Гениальное решение!
 21 февр. 2019 г., 12:24
добавление дисплея: блок. и min-width to thd удаляет его способность реагировать td, th в зависимости от содержимого. это решение создает больше проблем, чем решает.

scale(1,1) Свойство с box-shadow решит проблему.

tr:hover {
  transform: scale(1);
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  box-shadow: 0px 0px 5px rgba(0,0,0,0.3);
  -webkit-box-shadow: 0px 0px 5px rgba(0,0,0,0.3);
  -moz-box-shadow: 0px 0px 5px rgba(0,0,0,0.3);
}

Скрипки:https://jsfiddle.net/ampicx/5p91xr48/

Спасибо!!

 27 дек. 2017 г., 13:48
Пожалуйста, добавьте некоторую документацию / объяснение.
 01 июн. 2018 г., 13:39
Я хочу понять, почему это работает!

enter image description here

Я исправил это просто установив box-shadow на первую ячейку в ряду. Как это:

tr:hover                { background: #EEF0F3; cursor: pointer; }
tr:hover td:first-child { box-shadow: inset 2px 0 0 0 #323335; }

Я пробовал это в Firefox, Chrome и IE9. Кажется, работает нормально.

Если вы хотите, чтобы вокруг всего ряда была граница шириной 1px, вы могли бы сделать что-то вроде:

tr:hover td             { box-shadow: 0 1px 0 0 black, 0 -1px 0 0 black; }
tr:hover td:first-child { box-shadow: 0 -1px 0 0 black, -1px 0 0 0 black, 0 1px 0 0 black; }
tr:hover td:last-child  { box-shadow: 0 -1px 0 0 black, 1px 0 0 0 black, 0 1px 0 0 black; }

enter image description here

display: block был самым большим фактором.

CSS / HTML / Demo

tr {
  background-color: rgb(165, 182, 229);
  display: block;
  margin-bottom: 5px;
  -moz-box-shadow: 0px 2px 2px black;
  -webkit-box-shadow: 0px 2px 2px black;
  box-shadow: 0px 2px 2px black;
}
td,th {
  padding: 5px;
  text-align: left;
}
<table>
  <tr>
    <td>&nbsp;</td>
    <th>One</th>
    <th>Two</th>
  </tr>
  <tr>
    <th>Title</th>
    <td>Three</td>
    <td>Four</td>
  </tr>
  <tr>
    <th>Title2</th>
    <td>Five</td>
    <td>Six</td>
  </tr>
  <tr>
    <th>Title3</th>
    <td>Seven</td>
    <td>Eight</td>
  </tr>
  <tr>
    <th>Title4</th>
    <td>Nine</td>
    <td>Ten</td>
  </tr>
</table>

 George04 июн. 2012 г., 21:39
Хотя использование display: block добавляет тень, кажется, что все смещено влево. Что я могу сделать, чтобы это исправить?
 12 июл. 2013 г., 09:21
Вы можете добавить th, td {min-width: 150px;}, тогда все будет выглядеть отлично.

когда мышь была над ним. Ниже приведен код CSS для этого:

tr:hover {
    outline: none;
    -webkit-box-shadow: inset 0 0 10px #337AB7;
    box-shadow: inset 0 0 10px #337AB7;
}

Он отлично работает на Mozilla Firefox (38.0.1) и Internet Explorer (11.0.9600.17801), как на Windows 7. Однако не работал на Chrome (43.0.2357.81).

Поэтому мне пришлось обойти и я сделал смесь ответов Святослава Залищука и Давида Винецкого. В результате я получил:

@media screen and (-webkit-min-device-pixel-ratio:0) {
    tr:hover td:first-child {
       box-shadow: inset 0px 11px 8px -10px #337AB7, 
                   inset 0px -11px 8px -10px #337AB7, 
                   inset 11px 0px 8px -10px #337AB7;
    }

    tr:hover td {
       box-shadow: inset 0px 11px 8px -10px #337AB7, 
                   inset 0px -11px 8px -10px #337AB7;
    }

    tr:hover td:last-child {
       box-shadow: inset 0px 11px 8px -10px #337AB7, 
                   inset 0px -11px 8px -10px #337AB7, 
                   inset -11px 0px 8px -10px #337AB7;
    }
}

tbody > tr:hover {
    outline: none;
    -webkit-box-shadow: inset 0 0 10px #337AB7;
    box-shadow: inset 0 0 10px #337AB7;
}

Это прекрасно работает и не нарушает ширину столбцов таблицы и все еще работает в Mozilla и Explorer.

Ниже приведен полный пример:

table {
  box-sizing: border-box;
  border-collapse: collapse;
}
td,
th {
  padding-left: 10px;
  padding-right: 10px;
  border: 1px solid #dddddd;
  font: 14px;
  text-align: left;
}

/*To work only on Chrome and Safari*/
@media screen and (-webkit-min-device-pixel-ratio:0) {
  tr:hover td:first-child {
    box-shadow: inset 0px 11px 8px -10px #337AB7, 
      inset 0px -11px 8px -10px #337AB7, 
      inset 11px 0px 8px -10px #337AB7;
  }

  tr:hover td {
    box-shadow: inset 0px 11px 8px -10px #337AB7, 
      inset 0px -11px 8px -10px #337AB7;
  }

  tr:hover td:last-child {
    box-shadow: inset 0px 11px 8px -10px #337AB7, 
      inset 0px -11px 8px -10px #337AB7, 
      inset -11px 0px 8px -10px #337AB7;
  }
}

/*To work on the others browsers*/
tbody > tr:hover {
  outline: none;
  -webkit-box-shadow: inset 0 0 10px #337AB7;
  box-shadow: inset 0 0 10px #337AB7;
}
<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Born</th>
      <th>City</th>      
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>David Gilmour</td>
      <td>6 March 1946</td>
      <td>Cambridge, England</td> 
	</tr>
    <tr>
      <td>Roger Waters</td>
      <td>6 September 1943</td>
      <td>Surrey, England</td>		
    </tr>
    <tr>
      <td>Nick Mason</td>
      <td>27 January 1944</td>
      <td>Birmingham, England</td>
    </tr>
    <tr>
      <td>Richard Wright</td>
      <td>28 July 1943</td>
      <td>London, England</td>
    </tr>
  </tbody>
</table>

 11 апр. 2018 г., 12:16
Спасибо, работает как шарм. добавлятьtr:hover td:first-child:last-child { box-shadow: inset 0px 11px 8px -10px #337AB7, inset 11px 0px 8px -10px #337AB7, inset 0px -11px 8px -10px #337AB7, inset -11px 0px 8px -10px #337AB7; } чтобы он работал также в таблицах с одним столбцом.

отметьте эту ошибку, если вы хотите, чтобы она была исправлена:

https://code.google.com/p/chromium/issues/detail?id=94871

Если вы хотите, чтобы ширина ячеек таблицы продолжала автоматически настраиваться, вместо этого вы можете применить тень к отдельным ячейкам:

td:first-child {
  box-shadow:
    inset 0px 11px 8px -10px blue,
    inset 0px -11px 8px -10px blue,
    inset 11px 0px 8px -10px blue; 
}
td {
  box-shadow:
    inset 0px 11px 8px -10px blue,
    inset 0px -11px 8px -10px blue;
}
td:last-child {
  box-shadow:
    inset 0px 11px 8px -10px blue,
    inset 0px -11px 8px -10px blue,
    inset -11px 0px 8px -10px blue; 
}

Полный примерВот, (Jsfiddle)

(Вдохновленныйhttps://stackoverflow.com/a/10150898/724752)

В каждом поле значение тени:

Adjust the 3rd number (blur radius) to change the blur radius. The 4th number (spread radius) must always be negative and its absolute value must be greater than the 3rd number (blur radius). Make the 1st number (offset x) nonzero to get a shadow on the left or right. Make its absolute value 1 greater than the absolute value of the 4th number (see the example above again, much easier to see what I mean). Make the 2nd number (offset y) nonzero to get a shadow at top or bottom. Make its absolute value 1 greater than the absolute value of the 4th number.
 01 апр. 2015 г., 19:39
К сожалению, это подчеркивает еще одну ошибку в Chrome:code.google.com/p/chromium/issues/detail?id=137481 Boooo: /
 02 июл. 2015 г., 21:33
спасибо, пометил ошибку ...

Ваш ответ на вопрос