如何将框阴影添加到具有 display:table 行的 CSS div？

Question

如何将 box-shadow 添加到 CSS table 行？

在下面的代码中将 box-shadow: 2px 2px 2px #888888 添加到元素 table-row 不执行任何操作，仅适用于 table 元素或 table-cell 元素：

.table {
  display: table;
  background-color: #ffffff;
}

.row {
  display: table-row;
  box-shadow: 2px 2px 2px #888888;
}

.cell {
  display: table-cell;
  width: 100px;
}


<div class="table">
  <div class="row">
    <div class="cell">
      CELL 1
    </div>
    <div class="cell">
      CELL 2
    </div>
  </div>

  <div class="row">
    <div class="cell">
      CELL 3
    </div>
    <div class="cell">
      CELL 4
    </div>
  </div>
</div>

https://jsfiddle.net/ev36d1mh/

但是，我需要每个 table-row 都有 box-shadow: 2px 2px 2px #888888 并将其添加到 table-cell 中，从而在两个单元格之间创建一个阴影。消除垂直阴影不是一种选择。

那么如何将 box-shadow: 2px 2px 2px #888888 添加到 table 的整行？

Answer 1

正如@Sherin Matthew 所说，删除 display: table-row;

.table {
  display: table;
  background-color: #ffffff;
}

.row {
  //display: table-row;
  box-shadow: 2px 2px 2px #888888;
}

.cell {
  display: table-cell;
  width: 100px;
}

我已经注释掉了哪一行 - 但你可以完全删除它。

Answer 2

试试这个方法：

<div class="table">
 <div class="test">
  <div class="row">
    <div class="cell">
      CELL 1
    </div>
    <div class="cell">
      CELL 2
    </div>
  </div>
 </div>
 <div class="teste">
  <div class="row">
    <div class="cell">
      CELL 3
    </div>
    <div class="cell">
      CELL 4
    </div>
  </div>
 </div>
</div>

CSS 把这个放在

.test{
  box-shadow: 2px 2px 2px #888888;
  margin-bottom:2px;
 }
.teste{
  box-shadow: 2px 2px 2px #888888;
 }

Answer 3

如果不通过将显示重置为另一个值来破坏 table 布局，您实际上无法通过所有主要浏览器完成这项工作。

display:table-row; 是 <tr> table 元素的默认显示，其中不应该设置样式，只包含一行单元格 (td / th）。 thead、tbody、tfoot 是一样的，只是用来容纳 table-layout 的容器。

每个浏览器都会以自己的方式管理它，firefox 会接受它，IE 只会显示最后一个，之前的浏览器会隐藏在下面，而 webkit 不会显示任何内容。该限制似乎根据（或不）border-collapse 值绘制边界。

转身可能是使用伪元素：http://codepen.io/gc-nomade/pen/NNRVmd

table, .table {
  padding:0;
  margin:1em;
  display:inline-table; /* for the show */
  border-spacing:2px;
  background:yellow;
  vertical-align:top;
}
td, .td {
  padding:1em;
  display:table-cell;
  background:lightgray;;
}
tr, .tr {
  display:table-row;
}

/* fix ? */
table, .table {
  position:relative;/* needed to set width to pseudos */
}
td:first-child:after,
.td:first-child:after{
  pointer-events:none;
  content:'';
  position:absolute;
  padding:1em;/* equals padding of td */
  margin-top:2px;
  /* do not use top and bottom */
  left:0;
  right:2px;
  box-shadow: 2px 3px 2px;
}
td:last-child,
.td:last-child{
  box-shadow:6px 1px 2px -2px;/* finish the drawing on entire height of row */
}

<table>
  <tr>
    <td>Celll 1111</td>
  <td>Celll 222</td>
  </tr>
  <tr>
    <td>Cellll 33</td>
    <td>Cell 4</td>
  </tr>
</table>

<div class=table>
  <div class=tr>
    <div class=td>Celll 1111 111</div>
  <div class=td>Celll 222</div>
  </div>
  <div class=tr>
    <div class=td>Cellll 33</div>
    <div class=td>Cell 4</div>
  </div>
</div>

如何将框阴影添加到具有 display:table 行的 CSS div？

How to add box-shadow to a CSS div with display:table-row?

html

css

row

css-tables

box-shadow