Set the table cell widths to minimum except last column - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Table Cell

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

Description

Set the table cell widths to minimum except last column

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">
table {<!--  w  w w .  j  a  va2  s  .c  o m-->
   border:2px solid Chartreuse;
   border-collapse:collapse;
   width:100%;
}

table td {
   border:2px solid yellow;
}

table td:nth-child(1) {
   width:2%;
}

table td:nth-child(1) div {
   width:301px;
}
</style> 
 </head> 
 <body> 
  <table> 
   <tbody> 
    <tr> 
     <td> 
      <div>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit 
      </div> </td> 
     <td>Lore</td> 
     <td>Lorem ips</td> 
     <td>Lorem ipsum</td> 
    </tr> 
    <tr> 
     <td> 
      <div>
        Lorem ipsu 
      </div> </td> 
     <td>Lore</td> 
     <td>Lorem ips</td> 
     <td>Lorem ipsum</td> 
    </tr> 
    <tr> 
     <td> 
      <div>
        Lorem ipsu 
      </div> </td> 
     <td>Lore</td> 
     <td>Lorem ips</td> 
     <td>Lorem ipsum</td> 
    </tr> 
   </tbody> 
  </table>  
 </body>
</html>

Related Tutorials