Add space between table rows with border without using border-spacing and empty rows - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Table Row

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

Description

Add space between table rows with border without using border-spacing and empty rows

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <title>Lorem ipsu</title> 
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> 
  <style>
html {<!--from   ww w.  jav  a2 s  . c  o m-->
   height:100%;
   display:flex;
}

body {
   margin:auto;
}
</style> 
  <style>
table {
   border-spacing:0;
   margin:2em;
   background:tomato;
   padding:2em;
   box-shadow:0 0 6px;
   border-radius:0.6em;
}

th {
   padding:2em;
   width:51px;
   background:linear-gradient(to top, gray  , lightgray);
   background-size:4em 4.3em;
   vertical-align:bottom
}

th , td:after {
   border:2px solid;
}

td {
   text-align:center;
   background:linear-gradient(to bottom, transparent 2em, gray 2em, lightgray);
   position:relative;
   padding:3em  2em 2em
}

td:after {
   content:'';
   position:absolute;
   left:0;
   right:0;
   top:2em;
   bottom:0;
}

td:last-of-type {
   width:76px;
}

td[class] {
   width:100px;
}
</style> 
 </head> 
 <body translate="no"> 
  <table> 
   <thead> 
    <tr> 
     <th rowspan="2">Lore</th> 
     <th rowspan="2">Lore</th> 
     <th colspan="3">Lorem ipsum dolor s</th> 
     <th rowspan="2">Lore</th> 
    </tr> 
    <tr> 
     <th>Lorem</th> 
     <th>Lorem</th> 
     <th>Lorem</th> 
    </tr> 
   </thead> 
   <tbody> 
    <tr> 
     <td>Lore</td> 
     <td>Lore</td> 
     <td>Lore</td> 
     <td>Lore</td> 
     <td>Lore</td> 
     <td>Lore</td> 
    </tr> 
    <tr> 
     <td>Lore</td> 
     <td>Lore</td> 
     <td class>Lore</td> 
     <td>Lore</td> 
     <td>Lore</td> 
     <td>Lore</td> 
    </tr> 
    <tr> 
     <td>Lore</td> 
     <td>Lore</td> 
     <td>Lore</td> 
     <td>Lore</td> 
     <td>Lore</td> 
     <td>Lore</td> 
    </tr> 
   </tbody> 
  </table>  
 </body>
</html>

Related Tutorials