make table td tr auto width based on text length - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Table Width

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

Description

make table td tr auto width based on text length

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">
.hoverTable {<!--from   w w  w  .  ja  v  a  2  s.c o m-->
   border-collapse:collapse;
   table-layout:fixed;
}

.hoverTable td {
   padding:8px;
   border:2px solid Chartreuse;
}

.hoverTable tr {
   background:yellow;
}

.hoverTable tr:hover {
   background-color:blue;
}

.hoverTable th {
   background:pink;
}
</style> 
 </head> 
 <body> 
  <table class="hoverTable"> 
   <tbody> 
    <tr> 
     <th colspan="3">Lorem ipsum do</th> 
    </tr> 
    <tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';"> 
     <td>Lorem ipsum dolor sit amet, consecte</td> 
     <td>Lorem i</td> 
     <td>Lorem i</td> 
    </tr> 
    <tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';"> 
     <td>Lorem i</td> 
     <td>Lorem i</td> 
     <td>Lorem i</td> 
    </tr> 
    <tr> 
     <th colspan="3" class="width: 100%;">Lorem ipsum do</th> 
    </tr> 
    <tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';"> 
     <td>Lorem i</td> 
     <td>Lorem i</td> 
     <td>Lorem i</td> 
    </tr> 
    <tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';"> 
     <td>Lorem i</td> 
     <td>Lorem i</td> 
     <td>Lorem i</td> 
    </tr> 
    <tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';"> 
     <td>Lorem i</td> 
     <td>Lorem i</td> 
     <td>Lorem i</td> 
    </tr> 
   </tbody> 
  </table>  
 </body>
</html>

Related Tutorials