HTML table Fixed Header, htmltable fixed table

HTML table Fixed Header, htmltable fixed table

Recently I tried several methods to fix the table header in HTML... the difference... has its own advantages and disadvantages, but it is embarrassing .....

1. Set display of thead and tbody to block;

This can be achieved, but you need to set the width of each th and td in advance. Otherwise, the th and the corresponding td will be staggered and cannot be aligned;

2. Use two tables for simulation. The first is thead, and the second is tbody;

The cell width needs to be dynamically set to basically meet the needs, but in firefox, there will be a slight flaw, and the cell border will be staggered a little;

3. A good method found on <front-end stew> is very useful today. The scrollTop attribute of thead is dynamically set using transform.

The simulated Fixed Header is much easier than the first two methods, and the result is also very good;

Below is the original article link:

Http://www.html-js.com/article/cssyanjiu-css3shixiangudingbiaogetoubuerwuxushezhidanyuangetddikuandu%204019