HTML + CSS + JS perfectly compatible with the TABLE fixed columns of various browsers, csstable

HTML + CSS + JS perfectly compatible with the TABLE fixed columns of various browsers, csstable

In enterprise applications of BS architecture, when a table has a large number of columns, a common requirement is to fix the previous important columns, in this way, when you drag the scroll bar, a fixed column will help you view the data, and the user experience is good. Some heavyweight JS component libraries also have this function. Is there a simpler way to implement this function?

The common solution to this requirement is table joining. If you want to create a static webpage or a dynamic page with simple functions, the logic is simple and technically not complex, it is easy to implement, but if you want to make components with many dynamic functions, you need to write a lot of redundant code, which is difficult to maintain. Even a simple function requires a lot of code, for example, event processing, etc. This method is clumsy and has poor flexibility. It is not a good solution.

After a long period of analysis and research, we have found a solution with excellent compatibility in various scenarios. In general, we use the positioning calculation method. The following code is provided, and then make an explanation.

<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
I. Overall Structure:
The basic element of the page is DIV + TABLE. fixed columns are fixed by absolute positioning, and each column must be fixed by a fixed width. To solve the problem of horizontal and vertical scroll bars, the table header and the table body are enclosed in Two-layer Divs. the scroll bar is virtualized and fixed at a fixed position. The effect of the normal DIV scroll bar is simulated through JS control.
Ii. positioning:
The fixed column must be absolutely positioned. The left-side displacement is controlled through the left attribute. To ensure that the fixed column floats above, set z-index to 1 ,. To ensure the normal display of a vertical scroll bar, the outer DIV of the table body is absolutely positioned, which leads to the absolute positioning of the scroll bar. In addition, the header, table body, and the inner DIV of the scroll bar use the margin-left attribute to control the left margin and free the offset of the fixed column.
Ii. Width calculation:
A fixed value must be specified for the width of each column. Note that the min-width and max-width attributes must be added, which are equal to the width values, the inner DIV of the table body in the header. The width is auto, and the adaptive table width is. The outer DIV width is 100%. The inner margin on the right is controlled by the padding-right attribute of the outermost DIV, leave the position of the vertical scroll bar empty.
Iii. height calculation:
Because of the existence of absolute positioning, the height of the entire table component must be specified. It can be calculated that the top value of the vertical scroll bar also needs to be calculated.
4. scroll bar:
A prominent feature of this scheme is the virtual scroll bar, which simulates the horizontal scroll bar of the table DIV by a DIV with the same width and height as the table, and the vertical scroll bar is the same. The reason why this form is used is that the horizontal scroll bar is more beautiful. After the vertical scroll bar is processed like this, the width of the outer DIV of the header and table body is 100%. Otherwise, when the scroll bar exists, the width of the vertical scroll bar must be left blank in the header and the horizontal scroll bar. Otherwise, it cannot be aligned. This calculation is not complex, but in some cases there is a problem and it is not expanded here.
5. Rolling events:
Because the scroll bars of the table body are hidden, the mouse scroll wheel does not work. In this case, JavaScript is required to handle the mouse scroll event. The sample code in this article is compatible with common browsers. Here, the focus is on writing both onmousewheel and onwheel events. onmousewheel is compatible with IE. When calculating the rolling distance, pay attention to the difference between deltaY and wheelDelta attributes.
Vi. Advantages and Disadvantages analysis:
The solution in this article has been simplified. The focus is to clarify the principle, which is very complicated in our practice. This design takes into account a lot of compatibility, including browser compatibility and compatibility in various scenarios. if the demand is simple, there is still room for simplification.
The advantage of this solution is that if you want to make components, because the HTML structure is simple, the header and TABLE body are both a TABLE, and the JS control code is very clean and easy to maintain. The disadvantage is that there are too many computations. We think this solution is more suitable for developing components, and static pages are a little complicated.

The above is all the content of this article. I hope you will like it.