如何使用 CSS 和 JavaScript 凍結 HTML 表格標題？

用於固定HTML 表格標題的CSS 和JavaScript 技術

能夠凍結HTML 表格中的列標題，如Microsoft 中所示Excel 的「凍結窗格」功能非常適合擴充表。有幾種跨瀏覽器技術可以使用 CSS 或 JavaScript 來實現此效果。

CSS 轉換技術

對於現代瀏覽器，CSS 轉換提供了一個簡單的方法有效的解決方案：

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

此程式碼偵聽滾動事件表格容器並根據捲動位置翻譯表格標題( thead)。

CSS 的優點轉換技術：

• 最少程式碼（四行）
• 無外部相依性
• 適用於各種表格配置（表格佈局）
• 支援除Internet Explorer以外的所有主流瀏覽器8-

範例實作：

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

 您現有的容器/<h1 id="包裹">包裹{</h1><pre class="brush:php;toolbar:false">overflow: auto;
height: 400px;

}

/ CSS 演示/
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>

」

以上是如何使用 CSS 和 JavaScript 凍結 HTML 表格標題？的詳細內容。更多資訊請關注PHP中文網其他相關文章！