How do I create a scrollable table with fixed headers using CSS?

Setting Up a Scrollable Table with Fixed Headers Using CSS

Your table has both a scrollable body and a fixed header, but you're unsure how to achieve this effect. To solve this, we separate the header and body elements in HTML using and .

<table>
  <thead>
    <tr>
      <th>head1</th>
      <th>head2</th>
      <th>head3</th>
      <th>head4</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>row 1, cell 1</td>
      <td>row 1, cell 2</td>
      <td>row 1, cell 2</td>
      <td>row 1, cell 2</td>
    </tr>
    <tr>
      <td>row 2, cell 1</td>
      <td>row 2, cell 2</td>
      <td>row 1, cell 2</td>
      <td>row 1, cell 2</td>
    </tr>
  </tbody>
</table>

Next, we set display: block for and to separate their behavior and enable scrolling on the body without affecting the header.

table tbody, table thead {
  display: block;
}

We define the overflow and height properties for the body:

table tbody {
  overflow: auto;
  height: 100px;
}

Since the header and body are visually separated but technically linked, we set static widths for the and elements to ensure proper column alignment.

th {
  width: 72px;
}

td {
  width: 72px;
}

Remember to include proper HTML formatting, such as for each row, including the header row.

<tr>
  <th>head1</th>
  <th>head2</th>
  <th>head3</th>
  <th>head4</th>
</tr>

The above is the detailed content of How do I create a scrollable table with fixed headers using CSS?. For more information, please follow other related articles on the PHP Chinese website!