Creating Tables with Fixed Left Columns and Scrollable Bodies

In this tutorial, we will explore how to create HTML tables where the left column remains fixed while the rest of the table body is scrollable. This feature can be particularly useful for displaying large datasets where the first column serves as a reference or index.

To achieve this effect, we’ll use CSS to position the left column absolutely and wrap the entire table in a container with an overflow-x property set to scroll. Another approach involves using the sticky position property, which allows us to fix the left column without absolute positioning.

Method 1: Using Absolute Positioning

The first method requires wrapping your table in a div element and applying specific CSS styles to both the wrapper and the table elements.

<div>
  <table>
    <tr>
      <th class="headcol">1</th>
      <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
      <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
    </tr>
    <!-- More table rows here -->
  </table>
</div>

And the accompanying CSS:

table {
  border-collapse: separate;
  border-spacing: 0;
  border-top: 1px solid grey;
}

td,
th {
  margin: 0;
  border: 1px solid grey;
  white-space: nowrap;
  border-top-width: 0px;
}

div {
  width: 500px;
  overflow-x: scroll;
  margin-left: 5em;
  overflow-y: visible;
  padding: 0;
}

.headcol {
  position: absolute;
  width: 5em;
  left: 0;
  top: auto;
  border-top-width: 1px;
  /*only relevant for first row*/
  margin-top: -1px;
  /*compensate for top border*/
}

This approach works by fixing the position of the first column (.headcol) and making the table’s container scrollable horizontally. However, it requires careful adjustment of widths and positions to ensure proper alignment.

Method 2: Using Sticky Position

A more modern and straightforward method involves using the sticky position property. This approach is simpler and doesn’t require absolute positioning or tweaking margins and padding extensively.

<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>
        <!-- Table rows here -->
      </tbody>
    </table>
  </div>
</div>

And the CSS:

.view {
  margin: auto;
  width: 600px;
}

.wrapper {
  position: relative;
  overflow: auto;
  border: 1px solid black;
  white-space: nowrap;
}

.sticky-col {
  position: -webkit-sticky;
  position: sticky;
  background-color: white;
}

.first-col {
  width: 100px;
  min-width: 100px;
  max-width: 100px;
  left: 0px;
}

This method directly applies the sticky property to the columns you want to fix, making it easier to implement and less prone to layout issues compared to absolute positioning.

Choosing the Right Method

• Use the first method (absolute positioning) when you need more control over the table’s layout or when working with legacy browsers that don’t support sticky positioning.
• Prefer the second method (sticky position) for its simplicity and better support in modern browsers. It provides a clean and efficient way to achieve fixed columns without extensive CSS tweaking.

Conclusion

Creating tables with fixed left columns and scrollable bodies is achievable through two primary methods: using absolute positioning or the sticky position property. Both approaches have their use cases, depending on your specific requirements, such as browser support and layout complexity. By applying these techniques, you can enhance the usability of your web pages, especially when dealing with large datasets that require a fixed reference column.