Lets consider the following image. I am generating a monthly report of working duration of employees.. when the horizontal scrollbar is moved to the right, i want the code,name, area, territory column to be fixed on its position and the date columns should be horizontally scrollable. When scrolling right, the date columns should go underneath the code,name, area, territory column groups. How can i do it? Is there any css tricks or plugins available?

Lets consider the following image. I am generating a monthly report of working duration of employees.. when the horizontal scrollbar is moved to the right, i want the code,name, area, territory column to be fixed on its position and the date columns should be horizontally scrollable. When scrolling right, the date columns should go underneath the code,name, area, territory column groups. How can i do it? Is there any css tricks or plugins available?

• javascript
• html
• css

Share Follow asked Sep 30, 2019 at 7:52 Noob CoderNoob Coder 2,91788 gold badges3939 silver badges6464 bronze badges 1

• 1 Possible duplicate of HTML table with horizontal scrolling (first column fixed) – user2039981 Commented Sep 30, 2019 at 7:58

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

I think the most simple and logical way to fix columns according to @Circuit Breaker answer is

.view {
  margin: auto;
  width: 600px;
}

.wrapper {
  position: relative;
  overflow: auto;
  border: 1px solid black;
  white-space: nowrap;
}

.sticky-col {
  position: sticky;
  position: -webkit-sticky;    
  background-color: white;
}

.first-col {
  width: 100px;
  min-width: 100px;
  max-width: 100px;
  left: 0px;    
}

.second-col {
  width: 150px;
  min-width: 150px;
  max-width: 150px;
  left: 100px;    
}

<div class="view">
  <div class="wrapper"> 
    <table class="table">
      <thead>
        <tr>
          <th class="sticky-col first-col">Number</th>
          <th class="sticky-col second-col">First Name</th>
          <th>Last Name</th>
          <th>Employer</th>
       </tr>
      </thead>
       <tbody>
       <tr>
         <td class="sticky-col first-col">1</td>
         <td class="sticky-col second-col">Mark</td>
         <td>Ham</td>
         <td>Micro</td>
       </tr>
       <tr>
         <td class="sticky-col first-col">2</td>
         <td class="sticky-col second-col">Jacob</td>
         <td>Smith</td>
         <td>Adob Adob Adob AdobAdob Adob Adob Adob Adob</td>
       </tr>
       <tr>
         <td class="sticky-col first-col">3</td>
         <td class="sticky-col second-col">Larry</td>
         <td>Wen</td>
         <td>Goog Goog Goog GoogGoog Goog Goog Goog Goog Goog</td>
       </tr>
      </tbody>
    </table>
  </div>
</div>