如何固定合并表头表格列，实现指定列固定其余列左右滚动？

Great question! Fixing columns with merged headers is a common requirement, and using CSS position: sticky is the cleanest modern approach. Below is a complete implementation that fixes the No, Area, Category, and Sub Category columns while allowing the rest to scroll horizontally, even with merged table headers.

Complete Solution Code #

HTML

<div class="table-container">
  <table class="table table-bordered table-sm">
    <thead style="background:red;color:white">
      <!-- First header row with merged columns (rowspan=2) -->
      <tr>
        <th rowspan="2" class="sticky-col-1">No</th>
        <th rowspan="2" class="sticky-col-2">Area</th>
        <th rowspan="2" class="sticky-col-3">Category</th>
        <th rowspan="2" class="sticky-col-4">Sub Category</th>
        <th colspan="2">Risk Details</th>
        <th colspan="3">Mitigation Plan</th>
      </tr>
      <!-- Second header row -->
      <tr>
        <th>Risiko</th>
        <th>Severity</th>
        <th>Cause</th>
        <th>Impact</th>
        <th>Action</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="sticky-col-1">1</td>
        <td class="sticky-col-2">North</td>
        <td class="sticky-col-3">Operations</td>
        <td class="sticky-col-4">Equipment Failure</td>
        <td>Machine breakdown</td>
        <td>High</td>
        <td>Worn parts</td>
        <td>Production delay</td>
        <td>Replace parts weekly</td>
      </tr>
      <tr>
        <td class="sticky-col-1">2</td>
        <td class="sticky-col-2">South</td>
        <td class="sticky-col-3">Logistics</td>
        <td class="sticky-col-4">Delivery Delay</td>
        <td>Route congestion</td>
        <td>Medium</td>
        <td>Traffic jams</td>
        <td>Customer dissatisfaction</td>
        <td>Alternative routes</td>
      </tr>
      <!-- Add more rows to test scrolling -->
      <tr>
        <td class="sticky-col-1">3</td>
        <td class="sticky-col-2">East</td>
        <td class="sticky-col-3">IT</td>
        <td class="sticky-col-4">Data Breach</td>
        <td>Unsecured server</td>
        <td>Critical</td>
        <td>Outdated firewall</td>
        <td>Data loss</td>
        <td>Update security software</td>
      </tr>
    </tbody>
  </table>
</div>

CSS

/* Container to enable horizontal scrolling */
.table-container {
  overflow-x: auto;
  max-width: 100%;
}

/* Ensure table takes full width and borders collapse properly */
.table {
  width: 100%;
  border-collapse: collapse;
}

/* Style sticky columns - adjust left values based on your column widths */
.sticky-col-1 {
  position: sticky;
  left: 0;
  z-index: 4; /* Highest z-index to stay on top */
  background-color: red; /* Match header background */
}

.sticky-col-2 {
  position: sticky;
  left: 60px; /* Adjust based on the width of sticky-col-1 */
  z-index: 3;
  background-color: red;
}

.sticky-col-3 {
  position: sticky;
  left: 160px; /* Adjust based on width of sticky-col-1 + sticky-col-2 */
  z-index: 2;
  background-color: red;
}

.sticky-col-4 {
  position: sticky;
  left: 260px; /* Adjust based on width of previous sticky columns */
  z-index: 1;
  background-color: red;
}

/* Ensure data cells in sticky columns have a solid background */
tbody .sticky-col-1, tbody .sticky-col-2, tbody .sticky-col-3, tbody .sticky-col-4 {
  background-color: white; /* White background for data cells */
}

/* Override header background color */
thead .sticky-col-1, thead .sticky-col-2, thead .sticky-col-3, thead .sticky-col-4 {
  background-color: red;
  color: white;
}

Key Explanations #

• Table Container: The table-container div adds horizontal scrolling when the table exceeds the viewport width.
• Sticky Positioning: position: sticky keeps the columns fixed relative to the viewport as you scroll horizontally.
• Incremental Left Values: Each sticky column has a unique left value to prevent overlapping. Adjust these values to match the actual width of your columns.
• Z-Index: Higher z-index values ensure leftmost columns stay on top of the ones to their right during scrolling.
• Background Colors: Setting solid backgrounds for both header and data cells prevents the scrolling content from showing through the fixed columns.

If you need dynamic column widths (instead of fixed left values), you can use JavaScript to calculate column widths on page load and window resize, but the fixed approach works well for most use cases.

内容的提问来源于stack exchange，提问作者Marshall Telaumbanua