Wie erstelle ich eine feste Header-Tabelle in einem scrollbaren Div?

So erstellen Sie eine feste Kopfzeilentabelle in einem scrollbaren Div

Um eine Kopfzeile beim Scrollen zu fixieren, wird empfohlen, zwei Tabellen zu verwenden. Eine für den Header, der statisch bleibt, und eine andere für die Inhaltszellen, eingeschlossen in ein Div mit fester Höhe und aktiviertem Überlauf.

HTML:

<div class="wrap">
    <table class="head">
        <thead>
            <tr>
                <th>Head 1</th>
                <th>Head 2</th>
                <th>Head 3</th>
            </tr>
        </thead>
    </table>
    <div class="inner_table">
        <table>
        <tbody>
            <tr>
                <td>Body 1</td>
                <td>Body 2</td>
                <td>Body 3</td>
            </tr>
            <!-- More table rows here -->
        </tbody>
    </table>
    </div>
</div>

CSS:

.wrap {
    width: 352px;
}

.wrap table {
    width: 300px;
    table-layout: fixed;
}

table tr td {
    padding: 5px;
    border: 1px solid #eee;
    width: 100px;
    word-wrap: break-word;
}

table.head tr td {
    background: #eee;
}

.inner_table {
    height: 100px;
    overflow-y: auto;
}

Dieser Ansatz stellt einen statischen Header sicher, wenn der Inhalt der Tabelle gescrollt wird, und verhindert so, dass der Inhalt die wichtigen Spaltennamen verdeckt.

Das obige ist der detaillierte Inhalt vonWie erstelle ich eine feste Header-Tabelle in einem scrollbaren Div?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!