How to Create a Scrollable HTML Table with Fixed Headers and First Column?

Creating Scrollable HTML Table with Fixed Headers and First Column

How do you create an HTML table with fixed column headers and a first column that remains visible while scrolling the table's contents?

Answer:

To achieve this effect, you can utilize a combination of CSS and JavaScript. Here's how you can do it:

1. Create an HTML Table:

<code class="html"><table>
  <thead>
    <tr>
      <th>Column 1 Header</th>
      <th>Column 2 Header</th>
      <th>Column 3 Header</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
      <td>Data 3</td>
    </tr>
    <!-- more table rows -->
  </tbody>
</table></code>

2. CSS for Fixed Headers and First Column:

<code class="css">table {
  width: 100%;
  overflow: scroll;
}

table thead {
  position: sticky;
  top: 0;
}

table tr td:first-child {
  position: sticky;
  left: 0;
}</code>

This CSS ensures that the table headers are fixed to the top of the screen when scrolling and that the first column remains fixed to the left.

3. Enhanced Example:

You can also use advanced CSS Grid to achieve a similar effect with better support for responsiveness and screen readers:

<code class="css">table {
  display: grid;
  grid-template-columns: repeat(3, auto);
  grid-template-rows: auto 1fr;
}

table thead {
  grid-row: 1;
  grid-column: 1 / -1;
}

table tr {
  grid-column: 1 / -1;
}

table tr td:first-child {
  grid-column: 1;
}

table tbody {
  overflow: scroll;
}</code>

Note: The provided examples may require some adjustments depending on your specific table design and browser compatibility requirements.

The above is the detailed content of How to Create a Scrollable HTML Table with Fixed Headers and First Column?. For more information, please follow other related articles on the PHP Chinese website!