Create a Table with CSS grid and div - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Div Table

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

Description

Create a Table with CSS grid and div

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <title>Lorem ipsum dolor sit amet, consec</title> 
  <style>
.wrapper {<!--   www .j  a  v a 2  s  .c o  m-->
   display:grid;
   grid-template-columns:repeat(4, minmax(51px, 2fr));
   background-color:Chartreuse;
   color:yellow;
   max-width:801px;
}

.row {
   grid-column:2 / -2;
   display:grid;
   grid-template-columns:repeat(4, minmax(51px, 2fr));
}

div:nth-child(4) {
   grid-row-start:3;
}

div:nth-child(5) {
   grid-row-start:4;
}

.box {
   background-color:blue;
   color:pink;
   border-radius:6px;
   padding:21px;
   font-size:151%;
}
</style> 
 </head> 
 <body translate="no"> 
  <div class="wrapper"> 
   <div class="box a">
     Lorem i 
   </div> 
   <div class="box b">
     Lorem i 
   </div> 
   <div class="box c">
     Lorem i 
   </div> 
   <!-- Table Row --> 
   <div class="row"> 
    <div class="box d">
      Lorem ipsum 
    </div> 
    <div class="box e">
      Lorem ipsum dolor sit amet, c 
    </div> 
    <div class="box f">
      Lorem ipsum 
    </div> 
   </div> 
   <!-- Table Row --> 
   <div class="row"> 
    <div class="box d">
      Lorem ipsum 
    </div> 
    <div class="box e">
      Lorem ipsum dolor sit amet, c 
    </div> 
    <div class="box f">
      Lorem ipsum 
    </div> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials