Equal sized table cells to fill entire width of table - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Table Cell

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

Description

Equal sized table cells to fill entire width of table

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <title>Lorem ipsum dolor s</title> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">
ul {<!--   www .  j  a v a 2 s  .  co  m-->
   width:100%;
   display:table;
   table-layout:fixed;
   border-collapse:collapse;
}

li {
   display:table-cell;
   text-align:center;
   border:2px solid Chartreuse;
   vertical-align:middle;
   word-wrap:break-word;
}
</style> 
 </head> 
 <body> 
  <ul> 
   <li>Lorem<br>Lorem</li> 
   <li>Lorem ipsum dol</li> 
   <li>Lor</li> 
  </ul>  
 </body>
</html>

Related Tutorials