Html+css+js to achieve the perfect compatibility of the major browsers table fixed column _javascript tips

In the enterprise application of BS architecture, when a number of table columns is large, a common requirement for users is to secure the first few important columns so that the fixed columns when dragging the scroll bar will facilitate the user to view the data and the user experience is very good. Some of the heavyweight JS component library also has this function, so there is no simpler way to achieve this function?

The common solution for this requirement is to use a table concatenation method, this scheme if you want to make static Web pages, or function simple dynamic page, logic is relatively simple, technical is not complex, it is easy to achieve, but if you want to be made into components, dynamic function more, you need to write a large number of redundant code, difficult to maintain, Even a simple function, all need to write a lot of code, such as event processing, this method appears to be more clumsy, flexibility is poor, not a good solution.

After a long period of analysis and research, various scenarios of the test, we found a very good compatibility solution, in general, the use of positioning calculation method, the following post code, and then do an interpretation.

<! 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 column is fixed by absolute positioning, each column should specify fixed width, in order to solve the problem of the scroll bar, the table head and the outside of the table are wrapped two-story div, the scroll bar adopts the virtual way, Fixed in a fixed position through JS control simulation of the normal div scroll bar effect.

Second, positioning:

The fixed column must be positioned absolutely, and the left property is used to control the left-hand displacement, in order to ensure that the fixed column floats above, set Z-index to 1. In order to ensure the normal display of the vertical scroll bar, the outer div of the table body is absolutely positioned, which causes the scroll bar to be absolutely positioned. Also, the header and table body and the inner div of the scroll bar control the left margin by using the Margin-left property to free up the offset of the fixed column.

Second, Width calculation:

The width of each column specifies a fixed value, and note that a key point is to add the min-width and Max-width attributes, which are equal to the width value, the inner div of the Header table body, the width of auto, the adaptive table width, the outer div width of 100%, The outermost div controls the right inner margin through the Padding-right property, and the position of the vertical scroll bar is free.

Third, height calculation:

Because the absolute positioning exists, the height of the entire table component is specified, and it can be calculated that the top value of the vertical scroll bar also needs to be computed.

Four, the scroll bar:

One of the salient features of this scheme is the virtual scroll bar, which uses a div that is as wide and as high as a pixel to simulate the horizontal scroll bar of the table body Div, and the vertical scroll bar is the same. This form is used, one is the horizontal scroll bar so that the processing is more beautiful, when the vertical scroll bar is processed in this way, the outer div width of the header and the table body is not calculated, all is 100%, otherwise there is a scroll bar, the table header and the horizontal scroll bar to empty out the vertical scroll bar width of the displacement, otherwise can not be justified, this calculation is not complex, But in some cases there is a problem, which is not unfolding here.

V. Scrolling events:

Because the scroll bar of the table body is hidden, causing the mouse wheel does not work, so you need to use JS to handle the mouse wheel event, this article's sample code compatible with common browsers. The focus here is to write the OnMouseWheel and Onwheel events simultaneously, OnMouseWheel compatible with IE, when calculating the scrolling distance, pay attention to the difference between DeltaY and Wheeldelta attributes.

Vi. Advantages and Disadvantages Analysis:

The solution of this article has been streamlined, focusing on the principle of clarity, in our reality, very complex. This design takes into account a lot of compatibility, including browser compatibility and the compatibility of various scenarios, if the requirements are simple, there is room for simplification.

The advantage of this scheme is that if you want to do components, because the HTML structure is simple, the header and the table body are a Table,js control code is very clean and easy to maintain. The disadvantage is to compute too much. We think that this scenario is more applicable to the development of components, and static pages are a bit of a fuss.

The above mentioned is the entire content of this article, I hope you can enjoy.