Bootstrap 4中实现小屏幕设备下表格列固定的方法

Hey there! Bootstrap 4 doesn’t come with out-of-the-box support for fixed table columns on small screens, but we can easily pull this off with some custom CSS and a tiny tweak to your table structure. Let’s walk through the solution step by step.

Step 1: Adjust Your HTML Structure #

First, wrap your table in a custom container (instead of relying solely on Bootstrap’s table-responsive) to handle horizontal scrolling. Also, add a class like fixed-column to the columns you want to pin—usually the first 1-2 columns, since those are the most critical for context:

<div class="col-12">
  <!-- Custom container for scrollable table with fixed columns -->
  <div class="table-fixed-container">
    <table class="table">
      <thead>
        <tr id="mes">
          <!-- Add fixed-column class to columns you want to pin -->
          <th scope="col" class="fixed-column">column 1</th>
          <th scope="col" class="fixed-column">column 2</th>
          <th scope="col">column 3</th>
          <th scope="col">column 4</th>
          <th scope="col">column 5</th>
          <th scope="col">column 6</th>
          <th scope="col">column 7</th>
          <th scope="col">column 8</th>
          <th scope="col">column 9</th>
        </tr>
      </thead>
      <tbody>
        <!-- Example row -->
        <tr>
          <td class="fixed-column">Row 1, Col 1</td>
          <td class="fixed-column">Row 1, Col 2</td>
          <td>Row 1, Col 3</td>
          <td>Row 1, Col 4</td>
          <td>Row 1, Col 5</td>
          <td>Row 1, Col 6</td>
          <td>Row 1, Col 7</td>
          <td>Row 1, Col 8</td>
          <td>Row 1, Col 9</td>
        </tr>
        <!-- Add more rows as needed -->
      </tbody>
    </table>
  </div>
</div>

Step 2: Add Custom CSS #

Now drop this CSS into your stylesheet. It activates fixed columns only on small screens (you can adjust the breakpoint if needed):

/* Container to enable horizontal scrolling */
.table-fixed-container {
  overflow-x: auto;
  position: relative;
}

/* Set a fixed width for pinned columns - adjust to fit your content */
.fixed-column {
  width: 150px;
}

/* Media query for small screens (Bootstrap's "sm" breakpoint) */
@media (max-width: 767px) {
  .fixed-column {
    position: sticky;
    left: 0;
    background-color: #fff; /* Match your table body background */
    z-index: 10; /* Ensure fixed columns stay above scrolling content */
    box-shadow: 2px 0 5px rgba(0,0,0,0.1); /* Optional: Add subtle shadow for depth */
  }

  /* Match header background to Bootstrap's default table header */
  thead .fixed-column {
    background-color: #f8f9fa;
  }
}

Quick Tips: #

• Tweak the width: Adjust the 150px value for .fixed-column to fit your actual content—this prevents unexpected shrinking on small screens.
• Adjust the breakpoint: If you want fixed columns on medium screens too, change the media query to max-width: 991px.
• Match backgrounds: Make sure the background colors of fixed columns match your table’s header and body to avoid weird gaps when scrolling.

This method uses position: sticky, which is widely supported in modern browsers, and plays nicely with Bootstrap’s existing table styles.

内容的提问来源于stack exchange，提问作者Tony Starkus