make 2 column table using LI without using tables - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Table Column

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

Description

make 2 column table using LI without using tables

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">
* {<!--from ww w  .jav  a 2s  .  c  om-->
   margin:0;
   padding:0;
   -moz-box-sizing:border-box;
   -webkit-box-sizing:border-box;
   box-sizing:border-box;
}

ul {
   border:2px solid Chartreuse;
   list-style-type:none;
   zoom:2;
}

ul:after {
   content:"";
   display:table;
   clear:both;
}

.col1, .col2 {
   float:left;
   text-align:left;
   border-bottom:2px solid yellow;
   border-left:2px solid blue;
   padding:.26em;
   white-space:nowrap;
   width:100%;
   overflow:hidden;
   text-overflow:ellipsis;
}

.col1 {
   clear:left;
   width:31%;
}

.col2 {
   width:71%;
}

.th {
   font-weight:bold;
   text-align:center;
}
</style> 
 </head> 
 <body> 
  <ul> 
   <!-- "table" header" --> 
   <li class="col1 th">Lorem ipsum dol</li> 
   <li class="col2 th">Lorem ipsum dol</li> 
   <!-- "table" rows --> 
   <li class="col1">Lore</li> 
   <li class="col2">Lore</li> 
   <li class="col1">Lore</li> 
   <li class="col2">Lore</li> 
   <li class="col1">Lore</li> 
   <li class="col2">Lore</li> 
   <li class="col1">Lore</li> 
   <li class="col2">Lore</li> 
   <li class="col1">Lore</li> 
   <li class="col2">Lore</li> 
  </ul>  
 </body>
</html>

Related Tutorials