如何使用display：table-row将box-shadow添加到CSS div？ [英] How to add box-shadow to a CSS div with display:table-row?

问题描述

如何在CSS表格行中添加 box-shadow ？

添加框阴影：2px 2px 2px＃888888 到下面代码中的元素 table-row 无效，仅适用于 table 元素或 table-cell 元素：

  .table {
 display：table; 
 background-color：#ffffff; 
} 
 
 .row {
 display：table-row; 
框阴影：2px 2px 2px＃888888; 
} 
 
 .cell {
 display：table-cell; 
宽度：100像素； 
} 
 
 
< div class = table> 
< div class = row> 
< div class = cell> 
细胞1 
< / div> 
< div class = cell> 
 CELL 2 
< / div> 
< / div> 
 
< div class = row> 
< div class = cell> 
单元格3 
< / div> 
< div class = cell> 
单元格4 
< / div> 
< / div> 
< / div> 
  

How do you add box-shadow to a CSS table row?

Adding box-shadow: 2px 2px 2px #888888 to the element table-row in the code below does nothing and only works on the table element or the table-cell element:

.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/

However, I need each table-row to have box-shadow: 2px 2px 2px #888888 and adding it to the table-cell creates a shadow between the two cells. Eliminating the vertical shadowing is not an option.

So how can I add box-shadow: 2px 2px 2px #888888 to the entire row of a table?

解决方案

You actually cannot have this work through all majors browsers without breaking the table-layout by resetting display to another value.

display:table-row; is the default display of <tr> table elements, wich where not supposed to be styled, just holding a row of cells (td / th ). thead, tbody, tfoot would be the same, just containers to hold the table-layout.

Each browser will manage this their own way, firefox will accept it, IE will show only the last one where previous ones will lay underneath unseen and webkit won't show anything. The limit seems to draw a border depending (or not) on border-collapse value.

---

A turn around could be to used pseudo elements: 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-row将box-shadow添加到CSS div？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！