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

Question

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?

@SherinMathew: Yes, but I need to display `box-shadow` on the `table-row`. Surely there is a way around that despite for some strange reason the `table-row` element not honoring the `box-shadow`. I find it hard to believe that there is no way of adding `box-shadow` to a CSS table row. — ProgrammerGirl, Mar 14 '16 at 12:01
Firefox shows the shadows, IE shows the shadow only on the last row and chrome not at all . table-row is defaut display of tr, wich was in the beginning not really meant to be seen/styled but wrapping cells. 3 browsers with 3 different interpretation ... — G-Cyrillus, Mar 14 '16 at 12:10
@GCyrillus: So it's impossible to add a `box-shadow` directly or indirectly to a CSS Table Row in a way that's compatible with all major browsers? — ProgrammerGirl, Mar 14 '16 at 12:39
@GCyrillus: Thank you for confirming. Could you please add that as an answer so I can accept it so that others looking for this in the future know that it's not possible? Thanks. — ProgrammerGirl, Mar 14 '16 at 15:24
@GCyrillus Any reason for the re-open? Feel free to [join in chat](http://chat.stackoverflow.com/rooms/29074/html-css-webdesign) where we're discussing the question — Zach Saucier, Mar 14 '16 at 15:29

G-Cyrillus · Accepted Answer · 2016-03-14T16:48:42.047

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>

Thanks for actually answering the question! Marked as solved. — ProgrammerGirl, Mar 14 '16 at 15:34
@ProgrammerGirl added a turn around eventually in answer and here to play with :http://codepen.io/gc-nomade/pen/NNRVmd — G-Cyrillus, Mar 14 '16 at 16:26

score -2 · Answer 2 · answered Mar 14 '16 at 12:04

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

answered Mar 14 '16 at 12:04

webcreator25

59
7

Thanks, but won't removing `display: table-row` not treat the HTML code as an actual table as it will be missing a critical element (the row)? What are the downsides of not having a `table-row` as the row element of a CSS table? – ProgrammerGirl Mar 14 '16 at 12:06
@ProgrammerGirl That is the wrong question to ask. Really you should be asking "why do I want to use a table layout, and why am I not using an actual HTML table to do so?" – TylerH Mar 14 '16 at 15:28
1

@ProgrammerGirl: Semantics aside, you actually can't not have a table-row in a CSS table (unless the table is completely empty). A CSS table box always consists of table-row boxes that in turn contain table-cell boxes. Removing the display: table-row just causes the .row element to be contained in an anonymous table-cell box in an anonymous table-row box within the .table element (and the .cell box to be in an anonymous table within the .row element's block box). – BoltClock Mar 14 '16 at 16:23

CodeWeis · Answer 3 · 2016-03-14T18:28:43.787

-2

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

edited Mar 14 '16 at 18:28

answered Mar 14 '16 at 12:14

CodeWeis

846
6
19

it still breaks the table-layout https://jsfiddle.net/ev36d1mh/3/ – G-Cyrillus Mar 14 '16 at 12:17
if you look in te inspector you will see that it is impossible to put margin or something arround an "table-row" or "table-cell" sorry but it is the only way i see – CodeWeis Mar 14 '16 at 12:44
So it's impossible to achieve shadowing on an entire CSS Table Row directly or indirectly? How could they have made something so trivial so difficult or impossible to achieve? – ProgrammerGirl Mar 14 '16 at 13:58
For me how he want to do is impossible the only way do do some kind of is the way I did it but it is not perfect that way I wouldn't do it – CodeWeis Mar 14 '16 at 14:27

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

3 Answers3

Linked