Objective
Recently in the background management system to deal with a large number of tables, because the original project is the use of a For loop plus splicing string implementation, resulting in a lot of JS code, a variety of single quotation marks and double quotation marks of the nesting; the introduction of vue.js; use v-for to do template rendering; ;
The text is forced to wrap
Because of the number of columns in the individual tables, the text is squeezed downward, and the scene is miserable;
<style>p{ white-space:nowrap;//Force non-folding line}</style>The new problem is that the entire width exceeds the body after forcing a newline.
So consider the table of important columns to be fixed, the middle with a horizontal scroll bar to drag;
<style>p{ White-space:nowrap; overflow:hidden;//Control Overflow Hide overflow-x: scroll;//Set horizontal scroll bar}</style>Consider the need to make a fixed column, then split the table, and then use the float to restore the table, the following case is to split a table into three, and then float up to restore
Taking into account the need for self-adaptation, and then using percentages to do;
<style> p{width:100%; White-space:nowrap; } table td{border:1px solid #000; }. tab1{width:20%; Float:left; }. tab2{width:70%; Float:left; Overflow:hidden; Overflow-x: scroll; }. tab3{width:10%; Float:left; }</style><body><p> <table class= "Tab1" > <thead> <tr> <t H> first column </th> </tr> </thead> <tbody> <tr> <td> first column </td> </tr> </tbody> </table> <table class= "TAB2" > <thead> <tr> <th> Middle column </th> </tr> </thead> <tbody> <tr> <td> Middle column </td> </tr> </tbody> </table> <table cl ass= "Tab3" > <thead> <tr> <th> Tail column </th> </tr> </thead> <tbody> <tr> <td> Tail column </td> </tr> </tbody> </table></p></body>
So the above case is done.
Another point is that the table header of the middle table also needs to be fixed not to slide with the amount of tbody below; the idea I'm taking here is to do it by positioning; Since it's all done in percentages, the left value of the positioning is also a percentage; there's no code here.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
