Form fixed header, bottom, left

1. Effects

2. Realize ideas

table: The table adapts to the width and height of the screen. To achieve scrolling, you must add a div to the outer layer ( set the width and height you need ), the width of the table exceeds the width of the screen and a horizontal scroll bar appears, and the height exceeds the height of the div A vertical scroll bar appears.

3. Implementation steps

1. Table header, table content, bottom summary: wrapped with three divs ( head_div, content_div, foot_div ) respectively, and the height of the table content div should be set to achieve the effect of scrolling the middle content and fixing the content at the bottom of the header.
2. Because there are too many columns in the table, the content will be piled up on a small screen, and a horizontal scroll bar needs to be added for easy viewing. In this case, you need to wrap head_div, content_div, foot_div with a div ( father_div ), the css of father_div{overflow-x:auto;overflow-y:hidden},head_div,content_div,foot_div css{overflow-x:hidden }.
3. You will find that there will be another problem: because our table header and table content are separated, when there is too much td content in the table content, there will be a mismatch between the table content and the table header. This requires us to set a specific width for the column. When there is too much content, we need to hide {white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
4. When I set the width of the table column, I encountered a problem. The width setting is invalid. The width of the table table column is allocated according to the width of the table. When the width of the table table is not enough, the width set for the td is invalid.
   

4. Column selection function

1. The table I wrote needs the function of selecting columns: that is, select certain columns to display, and hide other contents. This is a good operation, that is, the columns are set to different classes, and which columns are selected, let the corresponding class{display:table-cell}, and other columns class{display:none}. Why set table-cell? At first, I set display: block and found that the style was messed up. I thought this was a table and should be displayed in table-cell.
2. This header is complicated. When the small column is hidden, its parent header column width colspan also needs to be modified.

5. Left center and summary fixed functions

1. This table splicing is a bit more complicated, requiring six div-wrapped tables. The width of the div on the left and right needs to be dynamically set. Since the column selection is added, the width of the table on the right also needs to be dynamically set.