Home > Web Front-end > CSS Tutorial > How to Create a Scrollable HTML Table with Fixed Headers and First Column?

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

Mary-Kate Olsen
Release: 2024-11-03 04:00:02
Original
1053 people have browsed it

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>
Copy after login

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>
Copy after login

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>
Copy after login

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!

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template