An example of how to implement horizontal scrolling between table fixed columns and table headers using pure CSS-CSS Tutorial-php.cn

An example of how to implement horizontal scrolling between table fixed columns and table headers using pure CSS

巴扎黑

Release： 2017-09-14 09:39:03

Original

2356 people have browsed it

This article mainly introduces you to the relevant information on how to use pure CSS to achieve table fixed columns and headers, and horizontal scrolling in the middle. The article introduces to you in detail the ideas and methods to achieve this effect through sample code. It has certain reference and learning value for everyone's study or work. Friends who need it can take a look below.

Preface

The background management system I am working on recently has to process a large number of tables, because the original project uses a for loop and concatenated strings. It was implemented in a way that resulted in a lot of js code; the nesting of various single quotes and double quotes was a headache; so vue.js was introduced; v-for was used for template rendering; the workload was suddenly reduced a lot, and I felt comfortable;

The text is forced to wrap.

Because some tables have a large number of columns, the text is squeezed together and wraps downwards; the scene is terrible to see. ;So the method of forced non-line wrapping is adopted

<style>
p{
     white-space: nowrap;//强制不折行
}
</style>

Copy after login

The new problem is that after forced line wrapping, the entire width exceeds the body

So we consider replacing the important columns of the table Fixed it; use the horizontal scroll bar to drag in the middle;

<style>
p{
    white-space: nowrap;
    overflow: hidden;//控制溢出隐藏
    overflow-x: scroll;//设置横向滚动条
}
</style>

Copy after login

Considering that the columns should be fixed, the table must be split; Then use float to restore the table; the following case is to split a table into three; then float it to restore it
Considering that it needs to be adaptive, it uses percentages to do it;

<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>
            <th>首列</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>首列</td>
        </tr>
        </tbody>
    </table>

    <table class="tab2">
        <thead>
        <tr>
            <th>中间列</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>中间列</td>
        </tr>
        </tbody>
    </table>

    <table class="tab3" >
        <thead>
        <tr>
            <th>尾列</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>尾列</td>
        </tr>
        </tbody>
    </table>
</p>
</body>

Copy after login

So the above case is completed

Another point is that the header of the middle table also needs to be fixed and cannot follow the amount below. tbody to slide; the idea I adopt here is to use positioning; since the above are all done with percentages; then the left value of positioning is also a percentage; I won’t go into the code here

The above is the detailed content of An example of how to implement horizontal scrolling between table fixed columns and table headers using pure CSS. For more information, please follow other related articles on the PHP Chinese website!