Pure CSS Implementation table fixed column and table head middle horizontal scrolling instance explanation

Source: Internet
Author: User
This article mainly introduces how to use pure CSS to implement table fixed column and table header, the middle horizontal scrolling related data, the text through the example code in detail to introduce to you about the realization of this effect of ideas and methods, to everyone's study or work has a certain reference learning value, The friends who need to take a look below.

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.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.