如何实现表格前4列及对应表头冻结，其余列可滚动

Hey there, let's get your table working so the first 4 columns (headers and data) stay locked in place while the rest scroll horizontally. The original code has a few gaps, so here's a polished, cross-browser solution:

Adjusted HTML #

We'll keep your existing structure—no extra classes needed, since we can target the first 4 columns directly with CSS nth-child selectors:

<div class="outer">
  <div class="inner">
    <table>
      <thead>
        <tr>
          <th>Header A</th>
          <th>Header B</th>
          <th>Header C</th>
          <th>Header D</th>
          <th>Header E</th>
          <th>Header F</th>
          <th>Header G</th>
          <th>Header H</th>
          <th>Header I</th>
          <th>Header J</th>
          <th>Header K</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>col 1 - C</td>
          <td>col 2 - C</td>
          <td>col 3 - C</td>
          <td>col 4 - C</td>
          <td>col 5 - C</td>
          <td>col 6 - C</td>
          <td>col 7 - C</td>
          <td>col 8 - C</td>
          <td>col 9 - C</td>
          <td>col 10 - C</td>
          <td>col 11 - C</td>
        </tr>
        <tr>
          <td>col 1 - C</td>
          <td>col 2 - C</td>
          <td>col 3 - C</td>
          <td>col 4 - C</td>
          <td>col 5 - C</td>
          <td>col 6 - C</td>
          <td>col 7 - C</td>
          <td>col 8 - C</td>
          <td>col 9 - C</td>
          <td>col 10 - C</td>
          <td>col 11 - C</td>
        </tr>
        <tr>
          <td>col 1 - C</td>
          <td>col 2 - C</td>
          <td>col 3 - C</td>
          <td>col 4 - C</td>
          <td>col 5 - C</td>
          <td>col 6 - C</td>
          <td>col 7 - C</td>
          <td>col 8 - C</td>
          <td>col 9 - C</td>
          <td>col 10 - C</td>
          <td>col 11 - C</td>
        </tr>
        <tr>
          <td>col 1 - C</td>
          <td>col 2 - C</td>
          <td>col 3 - C</td>
          <td>col 4 - C</td>
          <td>col 5 - C</td>
          <td>col 6 - C</td>
          <td>col 7 - C</td>
          <td>col 8 - C</td>
          <td>col 9 - C</td>
          <td>col 10 - C</td>
          <td>col 11 - C</td>
        </tr>
        <tr>
          <td>col 1 - C</td>
          <td>col 2 - C</td>
          <td>col 3 - C</td>
          <td>col 4 - C</td>
          <td>col 5 - C</td>
          <td>col 6 - C</td>
          <td>col 7 - C</td>
          <td>col 8 - C</td>
          <td>col 9 - C</td>
          <td>col 10 - C</td>
          <td>col 11 - C</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

Updated CSS #

Here's the key part—we'll use absolute positioning to lock the first 4 columns and adjust the scrollable container to avoid overlapping:

/* Outer container: acts as positioning context for fixed columns */
.outer {
  position: relative;
  width: 100%;
  overflow: hidden; /* Hide overflow from fixed columns */
}

/* Inner container: handles horizontal scrolling for remaining columns */
.inner {
  overflow-x: auto;
  width: calc(100% - 400px); /* Subtract total width of 4 fixed columns (4*100px) */
  margin-left: 400px; /* Push scrollable area right of fixed columns */
}

/* Table setup: fixed layout ensures consistent column widths */
table {
  table-layout: fixed;
  width: 100%;
  border-collapse: collapse; /* Merge borders for cleaner look */
  text-align: left;
}

/* Base styles for table cells */
th, td {
  vertical-align: top;
  border: 1px solid #ccc;
  padding: 10px;
  width: 100px; /* Fixed width for all columns */
}

/* Lock first 4 header columns */
thead th:nth-child(1),
thead th:nth-child(2),
thead th:nth-child(3),
thead th:nth-child(4) {
  position: absolute;
  top: 0;
  background: #fff; /* White background to cover scrolling content */
  z-index: 1; /* Ensure headers stay above content */
}

/* Position each fixed header column correctly */
thead th:nth-child(1) { left: 0; }
thead th:nth-child(2) { left: 100px; }
thead th:nth-child(3) { left: 200px; }
thead th:nth-child(4) { left: 300px; }

/* Lock first 4 body columns */
tbody td:nth-child(1),
tbody td:nth-child(2),
tbody td:nth-child(3),
tbody td:nth-child(4) {
  position: absolute;
  left: 0;
  background: #fff;
}

/* Position each fixed body column correctly */
tbody td:nth-child(1) { left: 0; }
tbody td:nth-child(2) { left: 100px; }
tbody td:nth-child(3) { left: 200px; }
tbody td:nth-child(4) { left: 300px; }

/* Align header and body rows */
thead tr {
  height: 42px; /* Match height to tbody rows for perfect alignment */
}

How This Works #

• Fixed Columns: The first 4 th and td elements are positioned absolutely within the .outer container, so they stay put when scrolling.
• Scrollable Area: The .inner container is shifted right by the total width of fixed columns, and its width is adjusted to fit the remaining space—this lets the rest of the table scroll horizontally.
• No Overlap: White backgrounds on fixed columns prevent scrolling content from covering them, and fixed row heights keep headers and body aligned.

Quick Tweak Tip #

If you need to adjust column widths, update the width value in th, td and modify the calc and margin-left values in .inner (e.g., 120px per column would mean width: calc(100% - 480px); margin-left: 480px;).

内容的提问来源于stack exchange，提问作者Pushpinder Bharaj