it-swarm.com.ru

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

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>

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

25
George

Как упоминалось ранее, свойство 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>

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

29
Sviatoslav Zalishchuk

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

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 )

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

  • Настройте 3-е число (радиус размытия), чтобы изменить радиус размытия.
  • 4-е число (радиус разброса) всегда должно быть отрицательным, а его абсолютное значение должно быть больше 3-го числа (радиус размытия).
  • Сделайте 1-е число (смещение x) ненулевым, чтобы получить тень слева или справа. Сделайте его абсолютное значение 1 большим, чем абсолютное значение 4-го числа (см. Пример выше, намного проще понять, что я имею в виду).
  • Сделайте 2-е число (смещение y) ненулевым, чтобы получить тень сверху или снизу. Сделайте его абсолютное значение 1 больше, чем абсолютное значение 4-го числа.
9
David Winiecki

Используйте свойство transform 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/

Спасибо!!

7
Anurag Malhotra

Я была такая же проблема. Я пытался выделить целый ряд, когда мышь была над ним. Ниже приведен код 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>

4
Marlos Damasceno

Причины этого, по-видимому, сводятся к CSS по умолчанию - 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>

4
Ian Wood

Теперь в v53 Chrome все исправлено и box-shadow отлично работает для <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>

1
S-Kerrigan

в ответ я объединил ответ, как показано ниже. Он работал нормально в Chrome,> Firefox, т.е. 11

.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;
}
0
VoHinh

Я хотел тень от коробки с левой стороны ряда, когда завис:

 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

0
A.D