Wie kann ich HTML-Tabellenüberschriften mit CSS und JavaScript einfrieren?-js-Tutorial-php.cn

Wie kann ich HTML-Tabellenüberschriften mit CSS und JavaScript einfrieren?

Barbara Streisand

Freigeben： 2024-12-09 00:06:13

Original

308 Leute haben es durchsucht

How Can I Freeze HTML Table Headers Using CSS and JavaScript?

CSS- und JavaScript-Techniken für feste HTML-Tabellenüberschriften

Die Möglichkeit, Spaltenüberschriften in einer HTML-Tabelle einzufrieren, wie sie in Microsoft zu sehen ist Die Excel-Funktion „Fenster einfrieren“ ist für erweiterte Tabellen äußerst wünschenswert. Es gibt mehrere browserübergreifende Techniken, die diesen Effekt entweder mit CSS oder JavaScript erzielen können.

CSS-Transformationstechnik

Für moderne Browser bieten CSS-Transformationen eine einfache Möglichkeit und effektive Lösung:

 var translator = "translate(0," this.scrollTop "px)";<br> this.querySelector("thead").style.transform = translator;<br>});<br>

Dieser Code wartet auf Scroll-Ereignisse den Tabellencontainer und übersetzt den Tabellenkopf (thead) basierend auf der Bildlaufposition.

Vorteile der CSS-Transformation Technik:

Minimaler Code (vier Zeilen)
Keine externen Abhängigkeiten
Funktioniert mit verschiedenen Tabellenkonfigurationen (Tabellenlayout)
Unterstützt alle gängigen Browser außer Internet Explorer 8-

Beispielimplementierung:

 var Translate = "translate(0," this.scrollTop "px)";<br> this.querySelector("thead").style.transform = Translate;<br>});

 Ihr vorhandener Container </em>/</p><h1>wrap {</h1><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">overflow: auto;
height: 400px;

Nach dem Login kopieren

}

/ CSS für demo /
td {

background-color: green;
width: 200px;
height: 100px;

Nach dem Login kopieren

}

<pre class="brush:php;toolbar:false"><table>
    <thead>
        <tr>
            <th>Foo</th>
            <th>Bar</th>
        </tr>
    </thead>
    <tbody>
        <tr><td></td><td></td></tr>
        <tr><td></td><td></td></tr>
        <tr><td></td><td></td></tr>
        <tr><td></td><td></td></tr>
        <tr><td></td><td></td></tr>
        <tr><td></td><td></td></tr>
        <tr><td></td><td></td></tr>
        <tr><td></td><td></td></tr>
        <tr><td></td><td></td></tr>
        <tr><td></td><td></td></tr>
        <tr><td></td><td></td></tr>
        <tr><td></td><td></td></tr>
    </tbody>
</table></p>
<p></div>

“

Das obige ist der detaillierte Inhalt vonWie kann ich HTML-Tabellenüberschriften mit CSS und JavaScript einfrieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!