Home > Article > Web Front-end > An example of how to implement horizontal scrolling between table fixed columns and table headers using pure CSS

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

巴扎黑Original: 2017-09-14 09:39:032352browse

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>

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>

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>

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!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Detailed introduction to same-origin and cross-domain front-end interviewsNext article：Detailed introduction to same-origin and cross-domain front-end interviews

See more

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

Related articles