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

问题

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?

回答1:

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>

回答2:

As @Sherin Matthew said remove 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;
}

I've commented out to show you which line - but you can delete it completely.

回答3:

try this way:

<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 put this in

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

来源：https://stackoverflow.com/questions/35986760/how-to-add-box-shadow-to-a-css-div-with-displaytable-row

标签

html

css

row

css-tables

box-shadow