Adjusting a table full width - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Table Width

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

Description

Adjusting a table full width

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <style type="text/css">
table<!--from   ww  w .ja  v  a  2  s . c o  m-->
{
   width: 100%;
   table-layout: fixed;
}
td
{
   white-space: nowrap;
   overflow: hidden;
}

      </style> 
   </head> 
   <body> 
      <table> 
         <colgroup> 
            <col width="36%"> 
            <!-- longer --> 
            <col width="15%"> 
            <col width="13%"> 
            <col width="13%"> 
            <col width="13%"> 
            <col width="5%"> 
            <col width="5%"> 
         </colgroup> 
         <thead> 
            <tr> 
               <th> A </th> 
               <th> B </th> 
               <th> C </th> 
               <th> D </th> 
               <th> E </th> 
               <th> XX </th> 
               <th> YY </th> 
            </tr> 
         </thead> 
         <tbody> 
            <tr> 
               <td> first col is very very very very very very very very very large </td> 
               <td> second col </td> 
               <td> third col </td> 
               <td> fourth col </td> 
               <td> fifth col </td> 
               <td> XX </td> 
               <td> YY </td> 
            </tr> 
            <tr> 
               <td> first col </td> 
               <td> second col test test test test test test test test</td> 
               <td> third col </td> 
               <td> fourth col </td> 
               <td> fifth col </td> 
               <td> XX </td> 
               <td> YY </td> 
            </tr> 
            <tr> 
               <td> first col </td> 
               <td> second col </td> 
               <td> third col </td> 
               <td> fourth col </td> 
               <td> fifth col </td> 
               <td> XX </td> 
               <td> YY </td> 
            </tr> 
         </tbody> 
      </table>  
   </body>
</html>

Related Tutorials