So verhindern Sie, dass sich der Tabellenkopf in HTML verschiebt-HTML-Tutorial-php.cn

So verhindern Sie, dass sich der Tabellenkopf in HTML verschiebt

藏色散人

Freigeben： 2021-06-03 11:05:06

Original

3972 Leute haben es durchsucht

So erreichen Sie einen festen Tabellenkopf in HTML: Steuern Sie zunächst den Bereich, in dem der Inhalt gescrollt werden soll, und fügen Sie dann den Stil „overflow-y: auto;“ hinzu ;" zum tr-Tag, d. h. Der Zählerkopf kann fixiert werden.

So verhindern Sie, dass sich der Tabellenkopf in HTML verschiebt

Die Betriebsumgebung dieses Artikels: Windows7-System, HTML5- und CSS3-Version, Dell G3-Computer.

HTML-Tabelle mit festem Kopfteil und Bildlaufleiste Beim Scrollen wird standardmäßig die Tabellenüberschrift zusammen mit dem Tabelleninhalt gescrollt, was dazu führt, dass die Feldnamen, die der Überschrift entsprechen, nicht sichtbar sind, was sich negativ auf das Erlebnis auswirkt!

Implementierungsidee:

Fügen Sie den Stil „overflow-y: auto;“ zum Tag „tbody“ hinzu und fügen Sie den Stil „table-layout:fixed;“ hinzu Da tbody Mit der Bildlaufleiste muss auch die Bildlaufleiste Platz beanspruchen, was dazu führt, dass tbody und thehead falsch ausgerichtet sind. Daher muss beim Festlegen der Breite des tbody auch die Breite der Bildlaufleiste berücksichtigt werden hinzugefügt werden. [Wenn Sie die Bildlaufleiste nicht anzeigen möchten, können Sie die Breite der Bildlaufleiste auf 0 Pixel setzen und die Bildlaufleiste ist weg.

Das Folgende ist das Rendering, und der spezifische vollständige Beispielcode ist ebenfalls unten:

Vollständiger Beispielcode: So verhindern Sie, dass sich der Tabellenkopf in HTML verschiebt

<!DOCTYPE html>
<html>
 
<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>纯CSS table表格 thead固定 tbody滚动</title>
    <style>
        .table-box {
            margin: 100px auto;
            width: 1024px;
        }
 
        /* 滚动条宽度 */
        ::-webkit-scrollbar {
            width: 8px;
            background-color: transparent;
        }
 
        /* 滚动条颜色 */
        ::-webkit-scrollbar-thumb {
            background-color: #27314d;
        }
 
        table {
            width: 100%;
            border-spacing: 0px;
            border-collapse: collapse;
        }
 
        table caption{
            font-weight: bold;
            font-size: 24px;
            line-height: 50px;
        }
 
        table th, table td {
            height: 50px;
            text-align: center;
            border: 1px solid gray;
        }
 
        table thead {
            color: white;
            background-color: #38F;
        }
 
        table tbody {
            display: block;
            width: calc(100% + 8px); /*这里的8px是滚动条的宽度*/
            height: 300px;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
        }
 
        table tfoot {
            background-color: #71ea71;
        }
 
        table thead tr, table tbody tr, table tfoot tr {
            box-sizing: border-box;
            table-layout: fixed;
            display: table;
            width: 100%;
        }
 
        table tbody tr:nth-of-type(odd) {
            background: #EEE;
        }
 
        table tbody tr:nth-of-type(even) {
            background: #FFF;
        }
 
        table tbody tr td{
            border-bottom: none;
        }
 
    </style>
</head>
 
<body>
    <section>
        <table cellpadding="0" cellspacing="0">
            <caption>纯CSS table表格 thead固定 tbody滚动</caption>
            
            <thead>
                <tr>
                    <th>序 号</th>
                    <th>姓 名</th>
                    <th>年 龄</th>
                    <th>性 别</th>
                    <th>手 机</th>
                </tr>
            </thead>
 
            <tbody>
                <tr>
                    <td>001</td>
                    <td>Name</td>
                    <td>28</td>
                    <td>女</td>
                    <td>Mobile</td>
                </tr>
                <tr>
                    <td>002</td>
                    <td>Name</td>
                    <td>28</td>
                    <td>男</td>
                    <td>Mobile</td>
                </tr>
                <tr>
                    <td>003</td>
                    <td>Name</td>
                    <td>28</td>
                    <td>女</td>
                    <td>Mobile</td>
                </tr>
                <tr>
                    <td>004</td>
                    <td>Name</td>
                    <td>28</td>
                    <td>男</td>
                    <td>Mobile</td>
                </tr>
                <tr>
                    <td>005</td>
                    <td>Name</td>
                    <td>28</td>
                    <td>女</td>
                    <td>Mobile</td>
                </tr>
                <tr>
                    <td>006</td>
                    <td>Name</td>
                    <td>28</td>
                    <td>男</td>
                    <td>Mobile</td>
                </tr>
                <tr>
                    <td>007</td>
                    <td>Name</td>
                    <td>28</td>
                    <td>女</td>
                    <td>Mobile</td>
                </tr>
                <tr>
                    <td>008</td>
                    <td>Name</td>
                    <td>28</td>
                    <td>男</td>
                    <td>Mobile</td>
                </tr>
            </tbody>
 
            <tfoot>
                <tr>
                    <td colspan="5">【table，thead，tbody，tfoot】 colspan：合并行， rowspan：合并列 </td>
                </tr>
            </tfoot>
        </table>
    </section>
</body>
 
</html>

Nach dem Login kopieren

[Empfohlenes Lernen:

HTML-Video-Tutorial

]

Das obige ist der detaillierte Inhalt vonSo verhindern Sie, dass sich der Tabellenkopf in HTML verschiebt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!