html table horizontal scroll enabling for specific columns

Question

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?

Possible duplicate of [HTML table with horizontal scrolling (first column fixed)](https://stackoverflow.com/questions/3402295/html-table-with-horizontal-scrolling-first-column-fixed) — , Sep 30 '19 at 07:58

score 6 · Accepted Answer · answered Sep 30 '19 at 08:54

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>

this is the best solution i have found on stackoverflow. – user2972221 Sep 09 '21 at 17:42 — user2972221, Sep 09 '21 at 17:42
This is the best solution I have found on the entire web! – Julio Marchi Jul 12 '22 at 05:02 — Julio Marchi, Jul 12 '22 at 05:02

html table horizontal scroll enabling for specific columns

1 Answers1