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


Tags: html,css,table,row,box-shadow

Problem :

This question already has an answer here:

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?



Solution :

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>

screenshot chrome


    CSS Howto..

    Show Content if below specific width

    How to achieve a fancy outline around an image in CSS

    Text overlay over image on hover. How to stop other divs from moving

    Given the following HTML and CSS how can I get the input elment to fill the width of its parent?

    How to stop FOUC when using css loaded by webpack

    css - how to remove inherited style

    How to keep div height fixed during changing its content?

    How to have the cutout of a div at the bottom right with shadow to the left

    How do I get responsive images to stay equivalent heights as they scale?

    How do I create a full screen click target to work with CSS-only navigation menu with :target?

    How do I position this image using CSS so it overlaps a div but displays inline?

    How to make my first-child in css work properly?

    How can I increase the size of twitter bootstrap carousel navigation arrows

    CSS - How to working with multi-level menu by simple

    CSS: How to make the border of a

    tag to be 100 percent on the div tag?

    How to extend the background of a CSS-arrow to the whole page width?

    Adding bootstrap tooltip modifies the style of the element itself - how do I stop this happening?

    how to achieve the moving sparking effect with css and javascript as in css-tricks.com footer

    How to restrict the css star selector * to a class and all decendants?

    Navigation Menu That Shows/Hides On Rollover and Click

    How do I make CSS hover transitions animate on mouse off AND mouse over, and replicate that in jQuery?

    How to adjust the width of a DIV per height using CSS

    how to make this gradient vertical

    How to apply CSS to a Mac Chrome Select Box?

    how to place two divs side by side

    How to remove “gap” from nav bar and line?

    CSS Speech bubbles: How to update the tip position based on where the bubble is

    How do I make my background-color fill entire width of div when applied to a `ul li`?

    how to middle vertical-align using bootstrap input-group

    CSS3 Transitions in Stylus - how to degrade for IE9