position the table to cover full width of page - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Table Width

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

Description

position the table to cover full width of page

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <style>
.t1 table {<!--from   w  w  w. ja va2 s. c o m-->
   border-collapse:collapse;
}

.t1 th, td {
   text-align:center;
   padding:9px;
}

.t1 th {
   background-color:Chartreuse;
   color:yellow;
}

.t1 tr {
   border-bottom:2px solid;
}

.t1 tbody {
   height:301px;
   overflow-y:auto;
   overflow-x:hidden;
}

table {
   width:100%;
}
</style> 
 </head> 
 <body translate="no"> 
  <table table border="0" cellpadding="0" cellspacing="0" id="itemtable" class="t1"> 
   <tbody> 
    <tr> 
     <th>Lorem</th> 
     <th>Lorem ips</th> 
     <th>Lorem ips</th> 
    </tr> 
    <tr> 
     <td>L</td> 
     <td>Lorem ip</td> 
     <td>Lor</td> 
    </tr> 
    <tr> 
     <td>L</td> 
     <td>Lorem ip</td> 
     <td>Lor</td> 
    </tr> 
    <tr> 
     <td>L</td> 
     <td>Lorem ip</td> 
     <td>Lor</td> 
    </tr> 
    <tr> 
     <td>L</td> 
     <td>Lorem ip</td> 
     <td>Lor</td> 
    </tr> 
    <tr> 
     <td>L</td> 
     <td>Lorem ip</td> 
     <td>Lor</td> 
    </tr> 
    <tr> 
     <td>L</td> 
     <td>Lorem ip</td> 
     <td>Lor</td> 
    </tr> 
    <tr> 
     <td>L</td> 
     <td>Lorem ip</td> 
     <td>Lor</td> 
    </tr> 
    <tr> 
     <td>L</td> 
     <td>Lorem ip</td> 
     <td>Lor</td> 
    </tr> 
   </tbody> 
  </table>  
 </body>
</html>

Related Tutorials