css - 表格行上的框阴影未出现在某些浏览器上

Question

表格行上的 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。

score 40 · Accepted Answer

如前所述，box-shadow属性仅适用于具有display: block或display:inline-block属性的元素。

如果您将display: block作为一般样式规则添加到表格单元格中，它将折叠，因为单元格所具有的自动宽度/高度比例display:table将不再应用。要模拟该行为，只需将min-width属性分配给每个thand 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>

您也可以在这里查看小提琴。

score 39 · Accepted Answer

使用带有 box-shadow 的 transform scale(1,1)属性可以解决问题。

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/

谢谢！！

score 9 · Accepted Answer

如果您想看到它得到修复，请给这个错误加注星标：

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）

在每个盒子阴影值中：

调整第三个数字（模糊半径）来改变模糊半径。
第 4 个数字（扩展半径）必须始终为负，并且其绝对值必须大于第 3 个数字（模糊半径）。
使第一个数字（偏移 x）非零以在左侧或右侧获得阴影。使其绝对值 1 大于第 4 个数字的绝对值（再次参见上面的示例，更容易理解我的意思）。
使第二个数字（偏移 y）非零以在顶部或底部获得阴影。使其绝对值1大于第4个数的绝对值。

score 6 · Accepted Answer

我遇到过同样的问题。当鼠标悬停在整行上时，我试图突出显示整行。下面是它的css代码：

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

它在 Windows 7 上的 Mozilla Firefox (38.0.1) 和 Internet Explorer (11.0.9600.17801) 上运行良好。但是，在 Chrome (43.0.2357.81) 上无法运行。

因此，我不得不变通，我混合了 Sviatoslav Zalishchuk 和 David Winiecki 的答案。结果我得到：

@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>

score 3 · Accepted Answer

其背后的原因似乎归结为默认 CSS - 这display: block是最大的因素。

CSS / HTML / 演示

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>

score 3 · Accepted Answer

我的效果与box-shadow使用filterand非常相似drop-shadow。这有点 hacky，你需要找到阴影的最佳配置来匹配你的场景。

我原来的班级：

.project-row { 
   box-shadow: 0 0 15px 0 black;
}

我的新课：

.project-row { 
   filter: drop-shadow(0 0 9px black);
}

https://codepen.io/nico_nj/pen/XWbaZPJ

score 2 · Accepted Answer

现在，在 v53 Chrome 中，它已修复，并且 box-shadow 可以正常工作<tr></tr>！

CSS / HTML / 演示

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>

score 0 · Accepted Answer

悬停时，我想要在行的左侧有一个盒子阴影：

我只是通过在行中的第一个单元格上设置 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; }

score 0 · Accepted Answer

您可以使用:after表格行的伪元素显示在整体上方，tr并pointer events: none;应用.box-shadowtr

例子：

.custom-table {
    border-radius: 10px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
}
table {
  margin-bottom: 0;
  color: #4e4e4e;
}

thead {
  background: #000000;
  color: #FFFFFF;
  text-transform: uppercase;
  font-size: 15px;
  line-height: 18px;
  font-weight: 600;
}
th {
  padding: 20px 40px;
}
tr:hover:after {
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.3s ease-in-out;
}

tbody tr {
  background: #FFFFFF;
  position: relative;
}
tbody tr:after {
  display: block;
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 2;
  pointer-events: none;
  top: 0;
  left: 0;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0);
  transition: box-shadow 0.3s ease-in-out;
}
td {
  padding: 17px 40px;
  border: 0;
  vertical-align: middle;
}

<div class="custom-table table-responsive">
    <table class="table">
        <thead class="table-header">
            <tr class="table-row">
                <th scope="col" class="table-col">Date &amp; Time</th>
                <th scope="col" class="table-col">Meeting Name</th>
                <th scope="col" class="table-col">Document</th>
                <th scope="col" class="table-col">Type of Meeting</th>
            </tr>
        </thead>
        <tbody class="table-body">
            <tr class="table-row">
                <td class="table-col"><span class="meeting-date">16 Nov 2021 <b>Saturday</b></span><span class="meeting-time">7:00 PM</span></td>
                <td class="table-col">Lorem ipsum dolor sit amet</td>
                <td class="table-col"><span class="member-document">quis nostrud exercitation ullamco</span></td>
                <td class="table-col"><span class="meeting-type type-1">MEETINGS</span></td>
            </tr>
            <tr class="table-row">
                <td class="table-col"><span class="meeting-date">16 Nov 2021 <b>Saturday</b></span><span class="meeting-time">7:00 PM</span></td>
                <td class="table-col">Lorem ipsum dolor sit amet</td>
                <td class="table-col"><span class="member-document">quis nostrud exercitation ullamco</span></td>
                <td class="table-col"><span class="meeting-type type-1">MEETINGS</span></td>
            </tr>
            <tr class="table-row">
                <td class="table-col"><span class="meeting-date">16 Nov 2021 <b>Saturday</b></span><span class="meeting-time">7:00 PM</span></td>
                <td class="table-col">Lorem ipsum dolor sit amet</td>
                <td class="table-col"><span class="member-document">quis nostrud exercitation ullamco</span></td>
                <td class="table-col"><span class="meeting-type type-1">MEETINGS</span></td>
            </tr>
        </tbody>
    </table>
</div>

score -1 · Accepted Answer

在反应中，我将答案组合如下。它在 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;
}

css - 表格行上的框阴影未出现在某些浏览器上

10 回答 10

Related

Reference