Set table cells to their default size regardless of content - 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 table cells to their default size regardless of content

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">
div {<!--from  w  w  w.ja va 2  s.c o  m-->
   border:2px solid Chartreuse;
   height:501px;
}

table {
   width:100%;
   height:100%;
}

td {
   white-space:nowrap;
   vertical-align:top;
}

td.space-hog {
   width:100%;
   height:100%;
   background:yellow;
}
</style> 
 </head> 
 <body> 
  <div> 
   <table> 
    <tbody> 
     <tr> 
      <td>Lorem ips</td> 
      <td>L</td> 
     </tr> 
     <tr> 
      <td>Lorem ipsum dolor </td> 
      <td class="space-hog"></td> 
     </tr> 
    </tbody> 
   </table> 
  </div>  
 </body>
</html>

Related Tutorials