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) — user2039981
– user2039981, Commented Sep 30, 2019 at 7:58

Eslam Saeed · Accepted Answer · 2019-09-30 08:54:04Z

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>

answered Sep 30, 2019 at 8:54

Eslam Saeed

4164 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user2972221 Over a year ago

this is the best solution i have found on stackoverflow.

Julio Marchi Over a year ago

This is the best solution I have found on the entire web!

Collectives™ on Stack Overflow

html table horizontal scroll enabling for specific columns

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related