Question

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

在下面的代码中将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添加到表的整行？

Answer 1

您实际上无法通过所有主要浏览器完成此工作，而不会通过将显示重置为其他值来打破表格布局。

display:table-row;是<tr>表格元素的默认显示，其中不应该进行样式设置，仅保留一行单元格（td / th）。 thead，tbody，tfoot将是相同的，只是容纳表格布局的容器。

每个浏览器都会以自己的方式管理这个，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>

Answer 2

正如@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 3

尝试这种方式：

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

如何使用display：table-row？

3 个答案: