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

Question

提问by George

CSS box-shadow on table rows - tr- doesn't seem to be working consistently across browsers. On some browsers the shadow is displayed; on others, there is no shadow.

表格行上的 CSS box-shadow - tr- 似乎无法在浏览器中始终如一地工作。在某些浏览器上会显示阴影；在其他人身上，没有阴影。

I'm using the following CSS:

我正在使用以下 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;
}

Here is a jsFiddleof the below snippet:

这是以下代码段的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:The same behavior is observed when substituting <tr>with <div>and adding display: table-row.

注：代时，观察到相同的行为<tr>与<div>和添加display: table-row。

Answer 1

回答by Sviatoslav Zalishchuk

As previously mentioned, box-shadowproperty works only with elements that have display: blockor display:inline-blockproperty.

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

If you'll add display: blockto the table cell as a general styling rule, it will collapse, since automatic width/height proportions that cells had with display:tablewon't be applied anymore. To simulate that behavior just assign min-widthattribute to each thand td.

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

Then apply box-shadowto the row (on hover or without).

然后应用于box-shadow该行（悬停或不悬停）。

In summary, your code should look like this:

总之，您的代码应如下所示：

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; }

I've omitted vendor prefixes for simplicity.

为简单起见，我省略了供应商前缀。

Here is the full example:

这是完整的示例：

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>

You can also check out the fiddle here.

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

Answer 2

回答by Anurag Malhotra

Use transform scale(1,1)property with box-shadow it will solve the problem.

使用带有 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);
}

Fiddle: https://jsfiddle.net/ampicx/5p91xr48/

小提琴：https: //jsfiddle.net/ampicx/5p91xr48/

Thanks!!

谢谢！！

Answer 3

回答by David Winiecki

Please star this bug if you want to see it get fixed:

如果你想看到它得到修复，请给这个错误加星号：

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

If you want the table cell widths to continue to adjust themselves automatically, you can apply the shadow to the individual cells instead:

如果您希望表格单元格宽度继续自动调整，您可以将阴影应用于单个单元格：

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; 
}

Full example here. (jsfiddle)

完整示例在这里。(jsfiddle)

(Inspired by https://stackoverflow.com/a/10150898/724752)

（灵感来自https://stackoverflow.com/a/10150898/724752）

In each box shadow value:

在每个框阴影值中：

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.

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

Answer 4

回答by Marlos Damasceno

I had the same issue. I was trying to highlight an entire row when the mouse was over it. Below is the css code for it:

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

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

It works fine on Mozilla Firefox (38.0.1) and Internet Explorer (11.0.9600.17801), both on Windows 7. However, did not work on Chrome (43.0.2357.81).

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

Therefore, I had to workaround and I did a mix of the answers of Sviatoslav Zalishchuk and David Winiecki. As an result I got:

因此，我不得不解决问题，我混合了 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;
}

That works fine and it does not break the column width of the table and still working on Mozilla and Explorer.

这工作正常，它不会破坏表格的列宽，并且仍在 Mozilla 和 Explorer 上工作。

Below there is a full example:

下面是一个完整的例子：

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>

Answer 5

回答by Ian Wood

Reasons behind it seem down to default CSS - the display: blockwas the biggest factor.

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

CSS / HTML / Demo

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>

Answer 6

回答by nico_nj

I've got an effect quite similar to box-shadowusing filterand drop-shadow. It's a bit hacky and you'll need to find the best configuration of the shadow to match your scenario though.

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

My original class:

我原来的班级：

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

My new class:

我的新课：

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

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

Answer 7

回答by S-Kerrigan

Now, in v53 Chrome it fixed and box-shadow work fine for <tr></tr>!

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

CSS / HTML / Demo

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>

Answer 8

回答by A.D

I wanted a box-shadow on the left side of the row when hovered:

悬停时，我希望在行的左侧有一个框阴影：

I fixed it simply by setting the box-shadow on the first cell in the row. Like this:

我只是通过在行中的第一个单元格上设置框阴影来修复它。像这样：

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

I've tried it in Firefox, Chrome, and IE9. Seems to work fine.

我已经在 Firefox、Chrome 和 IE9 中尝试过。似乎工作正常。

If you want a 1px wide border around the whole row you could do something like:

如果你想在整行周围有一个 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; }

Answer 9

回答by VoHinh

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

在反应中，我已将答案组合如下。它在 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 表格行上的框阴影未出现在某些浏览器上

提问by George

回答by Sviatoslav Zalishchuk

回答by Anurag Malhotra

回答by David Winiecki

回答by Marlos Damasceno

回答by Ian Wood

回答by nico_nj

回答by S-Kerrigan

回答by A.D

回答by VoHinh

相关推荐

最近更新

标签

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

提问by George

回答by Sviatoslav Zalishchuk

回答by Anurag Malhotra

回答by David Winiecki

回答by Marlos Damasceno

回答by Ian Wood

回答by nico_nj

回答by S-Kerrigan

回答by A.D

回答by VoHinh

相关推荐

如何在 CSS 中应用多个变换？

CSS：为表格中的选定行设置颜色

CSS 中的内联 SVG

CSS 如何在 twitter bootstrap 中将默认背景颜色白色更改为其他颜色

相关推荐

最近更新

标签