当前位置：网站首页>Native table - scroll - merge function

Native table - scroll - merge function

2022-07-03 19:29:00 【South wind comes late and knows late】

form

 When we are working on the management system .
 Often use tables to display data .
 A form that has been used for so long , Do you still remember how the original form was written ？

A brief introduction to table labels

table： It is the frame of the whole table .

rt: Row representing table . How many in the table  <tr>  The tag shows how many lines of data there are .

td： Cell . 
 It is a label for storing data . Cell data can be text 、 picture 、 list 、 The paragraph .

th:  Is the header of the table .
<th>  It's actually  <td>  A variant of the cell .
 It's essentially a cell .
<th>  It's usually on the first line , Act as the title of each column .
 Most browsers will display the header as 【 Bold Center 】 The text of .

tbody  Is the content of the table

Table scrolling

1. Wrong way , There will be no scrollbars 
<tbody class="tbodybox">
    <tr class="trcss">
        <td> Learning Chinese </td>
    </tr>
</tbody>
.tbodybox {
    height: 200px;
    overflow-y: auto;
}

 The right way 
.tbodybox {
    max-height: 360px;
    display: block;
    overflow-y: overlay;
}
 If you want to tbody If the form scrolling is supported ,
tbody It must be set to have the characteristics of block level elements .
 In this way, scrolling will take effect 

th and td  Need to set up display: inline-block;
 In this way, there will be no problem with the element style 
 If not , There will be problems .

 But this brings another problem .
 That is, when tables are merged, there will be problems with the merged style .
 It is not allowed to have table There are related properties display:xxx

Now let's write a simple table to support scrolling

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title> pure CSS table form  thead Fix  tbody rolling </title>
    <style>
        table {
            /*  The cells in the table are centered  */
            text-align: center;
            /*  Remove the gap  */
            border-collapse: collapse;
            /*  Frame  */
            border: 1px solid pink;
            border-right: none;
        }
        
        tbody tr {
            /*  The top box of each row of the table  */
            border-top: 1px solid pink;
        }
        
        table tr th,
        table tbody tr td {
            /*  When rolling, you need , Otherwise, the width of the table content is incorrect  */
            display: inline-block;
            height: 40px;
            line-height: 40px;
            width: 170px;
            /*  Over display ellipsis  */
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            /*  The border line on the right  */
            border-right: 1px solid pink;
        }
        
        .tbodybox {
            max-height: 360px;
            <!--  This is a must , Otherwise, you cannot scroll  -->
            display: block;
            overflow-y: overlay;
        }
        
        .table-table .trcss:nth-child(odd) {
            background: palegoldenrod;
        }
        
        .table-table .trcss:nth-child(even) {
            background: palegreen;
        }
    </style>
</head>

<body>
    <table class="table-table">
        <tr class="table-header-table">
            <th> Monday </th>
            <th> Tuesday </th>
            <th> Wednesday </th>
            <th> Thursday </th>
            <th> Friday </th>
        </tr>
        <tbody class="tbodybox">
            <tr class="trcss">
                <td> Learning Chinese </td>
                <td> Learning Chinese </td>
                <td> Learning Chinese </td>
                <td> Learning Chinese </td>
                <td> Learning Chinese </td>
            </tr>
            <tr class="trcss">
                <td> Learning Chinese </td>
                <td> Learning Chinese </td>
                <td> Learning Chinese </td>
                <td> Learning Chinese </td>
                <td> Learning Chinese </td>
            </tr>
            <tr class="trcss">
                <td> Learning Chinese </td>
                <td> Learning Chinese </td>
                <td> Learning Chinese </td>
                <td> Learning Chinese </td>
                <td> Learning Chinese </td>
            </tr>
        </tbody>
    </table>
</body>

</html>

Merge tables

colspan  Merge horizontal cells td; Or say  colspan Merge cells to the right  
colspan="2"  Express td This cell occupies horizontally 2 Share ;

rowspan  Property to merge cells down  
rowspan="2"  Express td This cell occupies 2 Share ;

 <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title> pure CSS table form  thead Fix  tbody rolling </title>
    <style>
        table {
            /*  The cells in the table are centered  */
            text-align: center;
            /*  Remove the gap  */
            border-collapse: collapse;
            /*  Frame  */
            border: 1px solid pink;
            border-right: none;
        }
        
        tbody tr {
            /*  The top box of each row of the table  */
            border-top: 1px solid pink;
        }
        
        table tr th,
        table tbody tr td {
            /*
        display: inline-block;
         With display The consolidation of tables will be invalid 
        */
            height: 40px;
            line-height: 40px;
            width: 170px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            border-right: 1px solid pink;
        }
    </style>
</head>

<body>
    <table>
        <tr>
            <th> name </th>
            <th> Official website </th>
            <th> nature </th>
        </tr>
        <tr>
            <td colspan="2">C Chinese language network </td>
            <td>http://c.xxx.net/</td>
            <!-- <td> Programming </td> -->
        </tr>
        <tr>
            <td> Baidu </td>
            <td>http://c.ccc.net/</td>
            <td> Search for </td>
        </tr>
        <tr>
            <td> tencent </td>
            <td>http://c.BBB.net/</td>
            <td rowspan="2"> Search for </td>
        </tr>
        <tr>
            <td> Bytes to beat </td>
            <td>http://c.ff.net/</td>
            <!-- <td> Search for </td> -->
        </tr>
    </table>
</html>

Points to pay attention to when merging cells

td,table It is not allowed to have  
display: inline-block; perhaps display: block;
 Or as long as there is  display:xxx;
 The combination of forms will fail 

 What if you want to merge tables and need to scroll ？
 At this time, it needs to be split .
 Use one div Package header (table>thead) And content (table>tbody)
 Place the scroll on table On

You can merge tables and scroll

<style>
    .tableheader {
        border: 1px solid pink;
        border-bottom: none;
    }
    table {
        /*  Remove the gap  */
        border-collapse: collapse;
    }
    .table-table-cont {
        display: inline-block;
        max-height: 260px;
        overflow-y: overlay;
        border-left: 1px solid pink;
        border-bottom: 1px solid pink;
    }
    tbody tr {
        /*  The top box of each row of the table  */
        border-top: 1px solid pink;
    }
    table tr th,
    table tbody tr td {
        height: 40px;
        line-height: 40px;
        width: 170px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        border-right: 1px solid pink;
    }
    .table-table-cont .trcss:nth-child(odd) {
        background: palegoldenrod;
    }
    .table-table-cont .trcss:nth-child(even) {
        background: palegreen;
    }
</style>

<div>
<table class="tableheader">
    <tr class="table-header-table">
        <th> Monday </th>
        <th> Tuesday </th>
        <th> Wednesday </th>
        <th> Thursday </th>
        <th> Friday </th>
    </tr>
</table>
<table class="table-table-cont">
    <tbody class="tbodybox">
        <tr class="trcss">
            <td> Learning Chinese </td>
            <td> Learning Chinese </td>
            <td> Learning Chinese </td>
            <td> Learning Chinese </td>
            <td> Learning Chinese </td>
        </tr>
        <tr class="trcss">
            <td colspan="4"> Learning Chinese </td>
            <td> Learning Chinese </td>
        </tr>

        <tr class="trcss">
            <td> Learning Chinese </td>
            <td> Learning Chinese </td>
            <td> Learning Chinese </td>
            <td> Learning Chinese </td>
            <td> Learning Chinese </td>
        </tr>

        <tr class="trcss">
            <td> Learning Chinese </td>
            <td> Learning Chinese </td>
            <td> Learning Chinese </td>
            <td> Learning Chinese </td>
            <td> Learning Chinese </td>
        </tr>

        <tr class="trcss">
            <td> Learning Chinese </td>
            <td> Learning Chinese </td>
            <td> Learning Chinese </td>
            <td> Learning Chinese </td>
            <td> Learning Chinese </td>
        </tr>
        <tr class="trcss">
            <td> Learning Chinese </td>
            <td> Learning Chinese </td>
            <td> Learning Chinese </td>
            <td> Learning Chinese </td>
            <td> Learning Chinese </td>
        </tr>

        <tr class="trcss">
            <td> Learning Chinese </td>
            <td> Learning Chinese </td>
            <td> Learning Chinese </td>
            <td> Learning Chinese </td>
            <td> Learning Chinese </td>
        </tr>
    </tbody>
</div>