How Can I Create a Table with a Fixed Header and Fixed First Column Using Only CSS?

Table with Fixed Header and Fixed Column Using Pure CSS

Creating a table with a fixed header and fixed first column without JavaScript presents challenges on mobile browsers. This article explores a pure CSS-based solution that achieves this functionality effectively.

Solution Using CSS Sticky Positioning:

Modern web browsers support the position: sticky property, which allows elements to stick to specific edges of their containing block, either horizontally (left/right) or vertically (top/bottom). By leveraging this property, we can achieve a fixed table header and fixed first column.

Steps for Implementation:

1. Create a Container: Place your table inside a container element that will handle the scrolling.
2. Enable Scrolling on Container: Specify overflow: scroll on the container to enable horizontal/vertical scrolling.
3. Stick Header and First Column Cells: Use sticky positioning for the table headers (thead th) to stick to the top and for the first column cells (tbody th) to stick to the left.
4. Fix Header on Left Column: To ensure the header cell in the first column remains fixed, set left: 0 and z-index: 2 on thead th:first-child. Z-index is used to ensure the header cell stays on top of the emulated border in the tbody th style.
5. Emulate Border for First Column: Browsers tend to drop borders on sticky elements. To address this, we emulate the border-right using a box-shadow on tbody th.

CSS Code:

/* Enable scrolling on container */
div.container {
  max-width: 400px;
  max-height: 150px;
  overflow: scroll;
}

/* Stick header cells to top */
thead th {
  position: sticky;
  top: 0;
}

/* Stick first column cells to left */
tbody th {
  position: sticky;
  left: 0;
}

/* Stick first column header cell on the left */
thead th:first-child {
  left: 0;
  z-index: 2;
}

/* Emulate border for first column */
tbody th {
  border-right: 1px solid #CCC;
  box-shadow: 1px 0 0 0 #ccc;
}

Conclusion:

By combining a scrolling container and sticky positioning, we can create a fixed table header and fixed first column without relying on JavaScript. This solution is widely supported by modern browsers and provides a smooth scrolling experience on both desktop and mobile devices.

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