How to Create a Fixed Header and Column Table Using Only CSS?

Creating a Table with Fixed Header and Column Using Pure CSS

Fixing the Header:

To create a fixed header without using JavaScript, the position: sticky property can be utilized. This property supports sticking elements to the top and side in modern versions of Chrome, Firefox, and Edge browsers.

Fixing the First Column:

To fix the first column, the same position: sticky property can be used, but with an additional left: 0 style to force the element to stick to the left side of the table.

Example Implementation:

1. Place the table inside a container with an overflow: scroll property, which enables scrolling within the container.
2. Use the position: sticky; top: 0; style on thead th elements to stick the header row to the top of the table.
3. Add position: sticky; left: 0; to tbody th to fix the first column.
4. To ensure the sticky header row remains above all other elements, set z-index: 1 on thead th.
5. Optionally, add border-right: 1px solid #CCC; and box-shadow: 1px 0 0 0 #ccc; to tbody th to emulate a border on the fixed column.

Note: To ensure this setup works properly, it's important to provide a max-width and max-height to the container.

The above is the detailed content of How to Create a Fixed Header and Column Table Using Only CSS?. For more information, please follow other related articles on the PHP Chinese website!