prevent table body scroll bar from offsetting header columns - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Table Column

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

Description

prevent table body scroll bar from offsetting header columns

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.13/components/table.css"> 
  <style id="compiled-css" type="text/css">
.outerTable table {
   width:99% !important;
   table-layout:fixed;
}

.outerTable tbody, .outerTable thead tr {
   display:block;
}

.outerTable tbody {
   height:calc(100vh - 151px);
   overflow-x:hidden;
   overflow-y:overlay;
}

.outerTable tbody td, .outerTable thead th {
   width:34% !important;
}

.outerTable thead th:last-child, .outerTable tbody tr td:last-child {
   width:601px !important;
}
</style> <!--from  w w  w . ja v  a  2 s .  c o m-->
 </head> 
 <body> 
  <div class="outerTable"> 
   <table class="ui celled selectable sortable striped unstackable table"> 
    <thead class=""> 
     <tr class=""> 
      <th class="">L</th> 
      <th class="">L</th> 
      <th class="">L</th> 
     </tr> 
    </thead> 
    <tbody class=""> 
     <tr class=""> 
      <td class="">L</td> 
      <td class="">L</td> 
      <td class="">L</td> 
     </tr> 
     <tr class=""> 
      <td class="">L</td> 
      <td class="">L</td> 
      <td class="">L</td> 
     </tr> 
     <tr class=""> 
      <td class="">L</td> 
      <td class="">L</td> 
      <td class="">L</td> 
     </tr> 
     <tr class=""> 
      <td class="">L</td> 
      <td class="">L</td> 
      <td class="">L</td> 
     </tr> 
    </tbody> 
   </table> 
  </div>  
 </body>
</html>

Related Tutorials