css implementation of operating table columns-CSS Tutorial-php.cn

css implementation of operating table columns

php中世界最好的语言

Release： 2018-03-21 13:11:16

Original

1764 people have browsed it

This time I will bring you css to operate table columns. What are the precautions for css to operate table columns? The following is a practical case, let's take a look.

Preface

The background management system I am working on recently has to process a large number of tables, because the original project used

for loopAdded the method of splicing strings; resulting in a lot of js code; various nesting of single quotes and double quotes; which 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 was forced to line wrap

Because some tables have a large number of columns; The text was all squeezed together and wrapped downwards; the scene was terrible; so I adopted the method of forcing no line wrapping

<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 I considered changing the table The important columns are fixed; 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; and then the table can be restored using floating ;The following case is to split a table into three; and 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

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!