Home >Web Front-end >CSS Tutorial >How to Keep HTML Table Headers Visible While Scrolling the Body?

How to Keep HTML Table Headers Visible While Scrolling the Body?

DDD
DDDOriginal
2024-12-09 07:24:07685browse

How to Keep HTML Table Headers Visible While Scrolling the Body?

How to display scroll bar onto a html table

When creating HTML tables, sometimes it's necessary to have the headers remain visible, even as the table's content scrolls.

To achieve this, wrap the table in a non-statically positioned div that has an overflow:auto CSS property. Then, position the elements in the table head absolutely, as seen below:

#table-wrapper {
  position:relative;
}
#table-scroll {
  height:150px;
  overflow:auto;  
  margin-top:20px;
}
#table-wrapper table {
  width:100%;
}
#table-wrapper table * {
  background:yellow;
  color:black;
}
#table-wrapper table thead th .text {
  position:absolute;   
  top:-20px;
  z-index:2;
  height:20px;
  width:35%;
  border:1px solid red;
}
<div>

This will create a table with a fixed header and a scrolling body, similar to method 2 in the provided URL.

The above is the detailed content of How to Keep HTML Table Headers Visible While Scrolling the Body?. For more information, please follow other related articles on the PHP Chinese website!

Statement:
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