Network Security Internet Technology Development Database Servers Mobile Phone Android Software Apple Software Computer Software News IT Information

In addition to Weibo, there is also WeChat

Please pay attention

WeChat public account

Shulou

How to realize the fixed header drag of two table only the movement of the table body

2025-01-21 Update From: SLTechnology News&Howtos shulou NAV: SLTechnology News&Howtos > Development >

Share

Shulou(Shulou.com)06/03 Report--

Editor to share with you how the two table to achieve fixed head drag only watch body movement, I believe that most people do not know much, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

As soon as he first came into contact with asp.net, the manager gave it to a previous project to make a fixed header. As the name implies, in a table, the header is fixed, and when dragging the scroll bar, only the table body is allowed to move, but when the scroll bar is dragged horizontally, the header will also move with the table body, which has the following effect:

I use two table methods, that is, I put the header into a table and the body into a table, so that I can manipulate the scroll bar flexibly.

The code is as follows:

.Box {overflow:hidden;}

.tableBox {height:200px; width:200px; position:relative; overflow-x:auto; overflow-y:hidden;table-layout:fixed;}

.tablehead {position:absolute; width:300px; left:0;}

.tablebody {position:absolute; width:300px; height:200px; overflow-y:auto; overflow-x:hidden; top:20px; left:0;}

Td {width:88px;white-space:normal;}

Table {border-collapse: collapse; border-spacing: 0There Margaret left: 5pxThere right: 5PX TableLay Layoutfixedl;}

Name, sex, age.

Xiaoming's out-and-out man 12

Xiaoming male 12

Xiaoming male 12

Xiaoming male 12

Xiaoming male 12

Xiaoming male 12

Xiaoming male 12

Xiaoming male 12

Xiaoming male 12

Xiaoming male 12

Xiaoming male 12

Xiaoming male 12

There are three div, the outermost one, controlling the overall situation, one controlling the meter header, and one controlling the meter body. There are the following points to note:

1. For the outermost div, you need to use overflow-x to control the most horizontal scrolling, because overflow-x and y have compatibility problems in IE. When one of the overflow-x/overflow-y is set to 'scroll',' auto', 'hidden', the other is still' visible', will not be set to 'auto', so it's best to use "overflow-x:scroll; overflow-y:auto". In this case, the one on the right will be displayed when needed. If you want the scroll bar on the right not to appear all the time, you can use: "overflow-x:scroll; overflow-y:hidden;"

two。 The columns of the header and body need to be aligned, so you can use table-layout:fixed; to fix the width

3. When the column width is fixed with table-layout:fixed;, long content will be displayed incompletely, so you can use white-space:normal; to wrap lines.

The above is all the contents of the article "how to realize the movement of the table body only when dragging a fixed table head with two table". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.

Views: 245

*The comments in the above article only represent the author's personal views and do not represent the views and positions of this website. If you have more insights, please feel free to contribute and share.

Share To

Development

Wechat

© 2024 shulou.com SLNews company. All rights reserved.

12
Report