Align items like table with 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

Align items like table with div

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <title>  Daniel David</title> 
  <style>
.container {<!-- www.j  a  va2  s . c  o m-->
   display:inline-grid;
   grid-column-gap:2em;
   grid-template-columns:repeat(4, auto);
   padding:0;
   background-color:Chartreuse;
   padding-bottom:0.6em;
   border-bottom:3px dashed;
}

.container li, .container dl {
   display:contents;
}

h2 {
   grid-column:2 / -2;
   font-size:inherit;
   padding:0.6em 0 0 0;
   border-top:3px dashed;
}

dl>div, dd, dt {
   display:inline-block;
   padding:0;
   margin:0;
}

dt:after {
   content:":";
}

dd {
   margin-left:0.6em;
}

dl>div:nth-child(1) {
   background-color:yellow;
}

dl>div:nth-child(2) {
   background-color:blue;
}

dl>div:nth-child(3) {
   background-color:pink;
}
</style> 
 </head> 
 <body translate="no"> 
  <ul class="container"> 
   <li> <h2>Item 1</h2> 
    <dl> 
     <div> 
      <dt>
        attr1 
      </dt> 
      <dd>
        value a 
      </dd> 
     </div> 
     <div> 
      <dt>
        attr2 
      </dt> 
      <dd>
        value b 
      </dd> 
     </div> 
     <div> 
      <dt>
        attr3 
      </dt> 
      <dd>
        value c 
      </dd> 
     </div> 
    </dl> </li> 
   <li> <h2>Item 2 - Another One Here</h2> 
    <dl> 
     <div> 
      <dt>
        attr1 
      </dt> 
      <dd>
        value x 
      </dd> 
     </div> 
     <div> 
      <dt>
        attr2 
      </dt> 
      <dd>
        value some bit long 
      </dd> 
     </div> 
     <div> 
      <dt>
        attr3 
      </dt> 
      <dd>
        value z 
      </dd> 
     </div> 
    </dl> </li> 
   <li> <h2>Item 3 - Another One Here</h2> 
    <dl> 
     <div> 
      <dt>
        attr1 
      </dt> 
      <dd>
        value x 
      </dd> 
     </div> 
     <div> 
      <dt>
        attr2 
      </dt> 
      <dd>
        value some much much much longer 
      </dd> 
     </div> 
     <div> 
      <dt>
        attr3 
      </dt> 
      <dd>
        value z 
      </dd> 
     </div> 
    </dl> </li> 
  </ul>  
 </body>
</html>

Related Tutorials