Add box-shadow to a CSS div with display:table-row - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Div Table

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. Div Table

Description

Add box-shadow to a CSS div with display:table-row

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <title>Lorem ipsum dolor sit amet, consectetur adipiscin</title> 
  <style>
table, .table {
   padding:0;
   margin:2em;
   display:inline-table;
   border-spacing:3px 9px;
   padding:0;
   background:yellow;
   vertical-align:top;
}

td, .td {
   padding:2em;
   display:table-cell;
   background:lightgray;
}

tr, .tr {
   display:table-row;
}

table, .table {
   position:relative;
}

td:first-child:after,
.td:first-child:after {
   pointer-events:none;<!--from   ww w. j ava  2 s  .c o m-->
   content:'';
   position:absolute;
   padding:2em;
   margin-top:3px;
   left:0;
   right:3px;
   box-shadow:3px 4px 3px;
}

td:last-child,
.td:last-child {
   box-shadow:7px 2px 3px -3px;
}
</style> 
 </head> 
 <body translate="no"> 
  <table> 
   <tbody> 
    <tr> 
     <td>Lorem ipsu</td> 
     <td>Lorem ips</td> 
    </tr> 
    <tr> 
     <td>Lorem ips</td> 
     <td>Lorem </td> 
    </tr> 
   </tbody> 
  </table> 
  <div class="table"> 
   <div class="tr"> 
    <div class="td">
      Lorem ipsum dolor sit am 
    </div> 
    <div class="td">
      Lorem ipsum 
    </div> 
   </div> 
   <div class="tr"> 
    <div class="td">
      Lorem ipsum 
    </div> 
    <div class="td">
      Lorem ip 
    </div> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials