Fixed header (introduction to implementation principles using jquery)_jquery

Table header fixing should be a frequently used function. I referred to several examples on the Internet, but the display is not perfect in several commonly used browsers. Moreover, many of them are based on fixed tables. When coding, you need to write a fixed header, which makes it difficult to start with dynamically generated tables with unknown number of columns. Moreover, most of the examples can only meet the limit of height. If the width is limited, there will be no help when a horizontal scroll bar appears.

My purpose is to find the table that exists on the page like jquery-ui, and call a method to achieve the function of fixing the header. Taking advantage of the opportunity to learn to write jquery plug-ins, I wrote a plug-in with a fixed header.
The usage is the same as the plug-in in jquery-ui. It only requires one line of code $('#table1').fixHeader({height:100});

The following browser tests passed
IE7 IE8 firefox16.0 chrome22.0
It is currently known that IE9 cannot align the following. I do not have IE9 on hand to debug at the moment. I will try to solve it later.

Note:
1 jquery is required, jquery-1.8.2 is used for development and testing, other versions should be small
2 The in the header part needs to be written In
3 Automatically adapt to the table width without limiting the width (assuming the scroll bar width is 20px, the actual width is the table width 20px)
4 Support multi-line header fixing
5 Normally All columns of the table are displayed, there is no horizontal scroll bar, and only the function of the vertical scroll bar is required. This plug-in supports table header fixing under limited width conditions.
6 When the table header is fixed under the condition of limiting the width and height, the table header fixing function cannot be realized simply through css. It needs to be implemented through js, and there will be slight flickering.
7 The borders of table, th, and td have been considered. -width is set to different values
8 The events bound in the header have been taken into account, and the events bound in the original header are still retained

Special attention: IE browsing Under the browser, be sure to set the border-width of td and th in the table, otherwise the column width cannot be set correctly, and the header and data parts will be misaligned
Usage:
Limit height: $('#table1'). fixHeader({height:100});
Limit height and width: $('#table3').fixHeader({height:100,width:500});

The following is the complete code