Home>Article>Web Front-end> How to make the table header not move in html
htmlThe method to realize that the table header does not move: first control the area where the content is to be scrolled in the tbody tag, and add the "overflow-y: auto;" style; then add "table-layout:" to the tr tag. fixed;" to fix the header.
The operating environment of this article: Windows7 system, HTML5&&CSS3 version, Dell G3 computer.
HTML table table fixed header tbody plus scroll bar
Pure CSS table table thead fixed tbody scrolling effect
Due to project needs, in the table , when the amount of data increases, scroll bars will appear, and during the scrolling process, the table header will scroll with the table content by default, resulting in the field names corresponding to the header not being visible, affecting the experience!
Implementation idea:
Control the area where the content is to be scrolled. Add overflow-y: auto; style to the tbody tag and give it to the tr tag. Add the table-layout:fixed; (this is the core) style. Since the tbody has a scroll bar, the scroll bar also needs to occupy space, which will cause the tbody and thead to be misaligned. Therefore, when setting the width of the tbody, the scroll bar must be The width is also added [If you don’t want to display the scroll bar, you can set the width of the scroll bar to 0px, and the scroll bar will disappear.
The following is the rendering, and the specific complete example code is also below:
Complete example code:
纯CSS table表格 thead固定 tbody滚动
纯CSS table表格 thead固定 tbody滚动 序 号 姓 名 年 龄 性 别 手 机 001 Name 28 女 Mobile 002 Name 28 男 Mobile 003 Name 28 女 Mobile 004 Name 28 男 Mobile 005 Name 28 女 Mobile 006 Name 28 男 Mobile 007 Name 28 女 Mobile 008 Name 28 男 Mobile 【table，thead，tbody，tfoot】 colspan：合并行， rowspan：合并列
[Recommended learning:html video tutorial]
The above is the detailed content of How to make the table header not move in html. For more information, please follow other related articles on the PHP Chinese website!