HTML5 tables with only certain columns to adjust width when browser is resized - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Table Row

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

Description

HTML5 tables with only certain columns to adjust width when browser is resized

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 {<!--   www . j av a 2  s.  co  m-->
   width:100%;
}

td {
   border:2px solid Chartreuse;
}

td.nowrap {
   white-space:nowrap;
}
</style> 
 </head> 
 <body> 
  <table> 
   <tbody> 
    <tr> 
     <td class="nowrap">Lorem ipsum dolor sit amet</td> 
     <td class="nowrap">Lorem ipsum dolor sit amet</td> 
     <td>Lorem ipsum dolor sit amet</td> 
     <td>Lorem ipsum dolor sit amet</td> 
     <td>Lorem ipsum dolor sit amet</td> 
     <td>Lorem ipsum dolor sit amet</td> 
     <td>Lorem ipsum dolor sit amet</td> 
     <td>Lorem ipsum dolor sit amet</td> 
    </tr> 
   </tbody> 
  </table>  
 </body>
</html>

Related Tutorials