Box上的行阴影不出现在某些浏览器上 [英] Box Shadow on table row not appearing on certain browsers

问题描述

表格行上的CSS盒子阴影 - tr 似乎并非跨浏览器一致地工作。在某些浏览器上显示阴影;

 
 
 $ b 
 code> 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 data-hide =true>

  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>一个< < th>两个< < / tr> < tr> < th>标题< / th> < td> Three< / td> < td>四< / td> < / tr> < tr> < th> Title2< / th> < td>五< / td> < td>六< / td> < / tr> < tr> < th> Title3< / th> < td>七< / td> < td>八< / td> < / tr> < tr> < th> Title4< / th> < td>九< / td> < td> Ten< / td> < / tr>< / table>  

注意：用< div> 替换< tr> display：table-row

。

解决方案

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

如果您将 display：block 添加到表单元格一般的样式规则，它会折叠，因为自动宽度/高度比例细胞与 display：table 将不再被应用。要模拟该行为，只需为每个 th 和 td min-width

然后将 box-shadow 应用到该行（悬停或不保存） p>

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

  -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> < aad> < tr> < th>电话号码< / th> < th>日期< / th> < th>名称< / th> < th>标签< / th> < / tr> < / thead> < tbody> < tr> < td> 0342443< / td> < td> 2013年8月10日< / td> < td> Kate< / td> < td>爱猫咪< / td> < / td> < tr> < td> 0342442< / td> < td> 2013年8月9日< / td> < td> Mary< / td> < td>镗孔< / td> < / tr> < tr> < td> 0342441< / td> < td> 2013年8月8日< / td> < td> Anna< / td> < td>喜欢极端的东西< / td> < / tr> < / tbody>< / table>  

查看这里的小提琴。

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.

I'm using the following 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 jsFiddle of the below snippet:

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.

解决方案

As previously mentioned, box-shadow property works only with elements that have display: block or display:inline-block property.

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

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

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.

这篇关于Box上的行阴影不出现在某些浏览器上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！