在某些浏览器中未显示表格行上的框阴影

Question

表行上的CSS框阴影– 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;
}

这是以下代码片段的[sFiddle：

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。

Answer 1

如前所述，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>