suchen

Heim >Web-Frontend >js-Tutorial >Wie kann ich HTML-Tabellenüberschriften mit CSS und JavaScript einfrieren?

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

Barbara Streisand
Barbara StreisandOriginal
2024-12-09 00:06:13296Durchsuche

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><pre class="brush:php;toolbar:false">overflow: auto;
height: 400px;

}

/ CSS für demo /
td {

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

}

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

JavaScript css html for using class var this position transform column table td microsoft excel Translate
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Wie wirkt sich die JavaScript-Vererbung auf die Konstruktor-Eigenschaft und den „instanceof“-Operator aus?Nächster Artikel：Wie wirkt sich die JavaScript-Vererbung auf die Konstruktor-Eigenschaft und den „instanceof“-Operator aus?

In Verbindung stehende Artikel

Mehr sehen