create a table with a fixed column at the start and end - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Table Column

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

Description

create a table with a fixed column at the start and end

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 {<!--from   w w  w. jav  a2s.  c  om-->
   table-layout:fixed;
   width:100%;
   *margin-left:-100px;
}

td, th {
   vertical-align:top;
   border-top:2px solid Chartreuse;
   padding:11px;
   width:100px;
}

th {
   position:absolute;
   *position:relative;
   left:0;
   width:100px;
}

.last-td {
   position:absolute;
   right:0;
   width:100px;
}

.container {
   position:relative;
   display:inline-block;
}

.wrapper {
   overflow-x:scroll;
   overflow-y:visible;
   width:201px;
   margin-left:100px;
   margin-right:121px;
}
</style> 
 </head> 
 <body> 
  <div class="container"> 
   <div class="wrapper"> 
    <table> 
     <tbody> 
      <tr> 
       <th>Lorem</th> 
       <td>Lorem ip</td> 
       <td>Lorem ip</td> 
       <td>Lorem ip</td> 
       <td class="last-td">Lorem</td> 
      </tr> 
      <tr> 
       <th>Lorem</th> 
       <td>Lorem</td> 
       <td>Lorem</td> 
       <td>Lorem</td> 
       <td class="last-td">Lorem</td> 
      </tr> 
      <tr> 
       <th>Lorem</th> 
       <td>Lorem</td> 
       <td>Lorem</td> 
       <td>Lorem</td> 
       <td class="last-td">Lorem</td> 
      </tr> 
      <tr> 
       <th>Lorem</th> 
       <td>Lorem</td> 
       <td>Lorem</td> 
       <td>Lorem</td> 
       <td class="last-td">Lorem</td> 
      </tr> 
      <tr> 
       <th>Lorem</th> 
       <td>Lorem</td> 
       <td>Lorem</td> 
       <td>Lorem</td> 
       <td class="last-td">Lorem</td> 
      </tr> 
      <tr> 
       <th>Lorem</th> 
       <td>Lorem</td> 
       <td>Lorem</td> 
       <td>Lorem</td> 
       <td class="last-td">Lorem</td> 
      </tr> 
     </tbody> 
    </table> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials