Div with display table to have the typical dividing lines - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Div Table

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

Description

Div with display table to have the typical dividing lines

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <title>Lorem ipsum dolor sit a</title> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">
#wrapper {<!--from ww  w.  j a  v  a2s  .c o  m-->
   display:table;
   table-layout:fixed;
   width:100%;
}

#wrapper div {
   display:table-cell;
   text-align:center;
}

#wrapper div:not(:last-child) {
   border-right:2px solid Chartreuse;
}

#wrapper div:hover {
   background-color:yellow;
}

.table {
   display:table;
   border-collapse:collapse;
}

.tablerow {
   display:table-row;
   border:2px solid blue;
}

.tablecell {
   display:table-cell;
}

.lrg {
   display:block;
   font-size:31px;
}
</style> 
 </head> 
 <body> 
  <h3>Lore</h3> 
  <div id="wrapper"> 
   <div> 
    <span class="lrg">L</span>Lorem ipsu 
   </div> 
   <div> 
    <span class="lrg">L</span>Lorem ipsu 
   </div> 
   <div> 
    <span class="lrg">L</span>Lorem ipsu 
   </div> 
   <div> 
    <span class="lrg">L</span>Lorem ipsu 
   </div> 
   <div> 
    <span class="lrg">L</span>Lorem ipsu 
   </div> 
   <div> 
    <span class="lrg">L</span>Lorem ipsu 
   </div> 
   <div> 
    <span class="lrg">L</span>Lorem ipsu 
   </div> 
   <div> 
    <span class="lrg">L</span>Lorem ipsu 
   </div> 
   <div> 
    <span class="lrg">L</span>Lorem ipsu 
   </div> 
   <div> 
    <span class="lrg">L</span>Lorem ipsu 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials