make fixed header table with table and cell width in percents in CSS - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Table Cell

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

Description

make fixed header table with table and cell width in percents in CSS

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-outer {<!--from  w  ww  .j ava2 s.  c  om-->
   padding-top:21px;
   position:relative;
   height:100px;
   overflow:hidden;
}

.table-wrap {
   overflow-x:auto;
   overflow-y:scroll;
   width:100%;
   height:100%;
}

table {
   width:100%;
   border-collapse:collapse;
}

thead {
   color:Chartreuse;
   background:yellow;
}

thead th p {
   overflow:hidden;
   height:0;
   margin:0;
   padding:0;
}

thead th span {
   position:absolute;
   top:0;
   display:block;
   background:blue;
   color:pink;
   width:100%;
}

tbody {
   background:pink;
}

th,
td {
   padding:0;
   text-align:left;
   vertical-align:top;
   border-left:2px solid OrangeRed;
}
</style> 
 </head> 
 <body> 
  <div class="table-outer"> 
   <div class="table-wrap"> 
    <table> 
     <thead> 
      <tr> 
       <th> <p>Lorem ip</p> <span>Lorem ip</span> </th> 
       <th> <p>Lorem ip</p> <span>Lorem ip</span> </th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr> 
       <td>Lorem ipsum d</td> 
       <td>Lorem ipsum d</td> 
      </tr> 
      <tr> 
       <td>Lorem ipsum d</td> 
       <td>Lorem ipsum d</td> 
      </tr> 
      <tr> 
       <td>Lorem ipsum d</td> 
       <td>Lorem ipsum d</td> 
      </tr> 
      <tr> 
       <td>Lorem ipsum d</td> 
       <td>Lorem ipsum d</td> 
      </tr> 
      <tr> 
       <td>Lorem ipsum d</td> 
       <td>Lorem ipsum d</td> 
      </tr> 
      <tr> 
       <td>Lorem ipsum d</td> 
       <td>Lorem ipsum d</td> 
      </tr> 
      <tr> 
       <td>Lorem ipsum d</td> 
       <td>Lorem ipsum d</td> 
      </tr> 
      <tr> 
       <td>Lorem ipsum d</td> 
       <td>Lorem ipsum d</td> 
      </tr> 
      <tr> 
       <td>Lorem ipsum d</td> 
       <td>Lorem ipsum d</td> 
      </tr> 
      <tr> 
       <td>Lorem ipsum do</td> 
       <td>Lorem ipsum do</td> 
      </tr> 
      <tr> 
       <td>Lorem ipsum do</td> 
       <td>Lorem ipsum do</td> 
      </tr> 
      <tr> 
       <td>Lorem ipsum do</td> 
       <td>Lorem ipsum do</td> 
      </tr> 
     </tbody> 
    </table> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials