HTML table with horizontal scrolling (first 5 columns fixed)

September 21, 2023

I have been trying to think of a way to create a table with the first 5 columns fixed (while allowing horizontal overflow for the rest of the table). I have tried searching for a solution on Google, but it only shows me how to fix the first column. Additionally, ChatGPT has not been able to provide a satisfactory solution. Can you please help me with this?

>Solution :

Is this what you are looking for?

.table-container {
  overflow-x: auto;
  max-width: 100%;
  position: relative;
}

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

th, td {
  border: 1px solid #ccc;
  padding: 8px;
  text-align: left;
  width: 100px;
}

th:nth-child(-n+5) {
  position: sticky;
  left: 0;
  background-color: #f2f2f2;
  z-index: 1;
}
 
th:nth-child(1) {
  left: 0;
}

th:nth-child(2) {
  left: 100px; /* Adjust this value to match the width of the first column */
}

th:nth-child(3) {
  left: 200px; /* Adjust this value to match the width of the first two columns */
}

th:nth-child(4) {
  left: 300px; /* Adjust this value to match the width of the first three columns */
}

th:nth-child(5) {
  left: 400px; /* Adjust this value to match the width of the first four columns */
}

<div class="table-container">
  <table>
    <thead>
      <tr>
        <th>Column 1</th>
        <th>Column 2</th>
        <th>Column 3</th>
        <th>Column 4</th>
        <th>Column 5</th>
        <th>Column 6</th>
        <th>Column 4</th>
        <th>Column 5</th>
        <th>Column 6</th>
        <th>Column 4</th>
        <th>Column 5</th>
        <th>Column 6</th> 
      </tr>
    </thead>
    <tbody> 
      <tr>
        <th>Column 1</th>
        <th>Column 2</th>
        <th>Column 3</th>
        <th>Column 4</th>
        <th>Column 5</th>
        <th>Column 6</th>
        <th>Column 4</th>
        <th>Column 5</th>
        <th>Column 6</th>
        <th>Column 4</th>
        <th>Column 5</th>
        <th>Column 6</th> 
      </tr>
      <tr>
        <th>Column 1</th>
        <th>Column 2</th>
        <th>Column 3</th>
        <th>Column 4</th>
        <th>Column 5</th>
        <th>Column 6</th>
        <th>Column 4</th>
        <th>Column 5</th>
        <th>Column 6</th>
        <th>Column 4</th>
        <th>Column 5</th>
        <th>Column 6</th> 
      </tr>
      <tr>
        <th>Column 1</th>
        <th>Column 2</th>
        <th>Column 3</th>
        <th>Column 4</th>
        <th>Column 5</th>
        <th>Column 6</th>
        <th>Column 4</th>
        <th>Column 5</th>
        <th>Column 6</th>
        <th>Column 4</th>
        <th>Column 5</th>
        <th>Column 6</th> 
      </tr>
      <tr>
        <th>Column 1</th>
        <th>Column 2</th>
        <th>Column 3</th>
        <th>Column 4</th>
        <th>Column 5</th>
        <th>Column 6</th>
        <th>Column 4</th>
        <th>Column 5</th>
        <th>Column 6</th>
        <th>Column 4</th>
        <th>Column 5</th>
        <th>Column 6</th> 
      </tr>
      <tr>
        <th>Column 1</th>
        <th>Column 2</th>
        <th>Column 3</th>
        <th>Column 4</th>
        <th>Column 5</th>
        <th>Column 6</th>
        <th>Column 4</th>
        <th>Column 5</th>
        <th>Column 6</th>
        <th>Column 4</th>
        <th>Column 5</th>
        <th>Column 6</th> 
      </tr>
      <tr>
        <th>Column 1</th>
        <th>Column 2</th>
        <th>Column 3</th>
        <th>Column 4</th>
        <th>Column 5</th>
        <th>Column 6</th>
        <th>Column 4</th>
        <th>Column 5</th>
        <th>Column 6</th>
        <th>Column 4</th>
        <th>Column 5</th>
        <th>Column 6</th> 
      </tr>
    </tbody>
  </table>
</div>