css implementation of operating table columns

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>

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>

• 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>

<p>
    </p>

                                                                                                      

首列

首列

                                                                                                           

中间列

中间列

                                                                                                           

尾列

尾列

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!

Recommended reading:

##detailed explanation of the use of pointer-events in css3

focus-within Detailed instructions for use

The above is the detailed content of css implementation of operating table columns. For more information, please follow other related articles on the PHP Chinese website!