我們如何凍結html表中的第一列和標題（具有多行）

Question

我已經嘗試了很多解決方案來凍結第一列和標題（具有多行），但是在每個解決方案中，我都必須使用用戶自定義CSS（根據解決方案的CSS）。

就我而言，我無法更改以前的CSS。 我想要在div滾動中可以凍結表（動態的）的代碼。

請提供解決方案。

Answer 1

我這樣做是這樣的：

<table style="table-layout: fixed">
    <tr>
        <td><div style="width:100px; position:fixed;">Frozen Header text</div></td>
    </tr>
    <tr>
        <td>Some data</td>
    </tr>
<table>

我不確定如何也凍結第一列，但我想您可以嘗試使用相同的策略，以及使用<col>標記進行格式化，類似於：

<col style="width:100px; position:fixed;" />

嘗試一下，請讓我們知道您的情況。

Answer 2

為了實現我的彗星jQuery和CSS使用。 這里的插件： 鏈接

這是一個jQuery插件，可以使表的行和列不滾動。

它可以采用給定的HTML表對象並進行設置，以便凍結給定數量的列或行或同時凍結這兩者，因此固定的列或行不會滾動。

要凍結的行應放在表頭部分。

它還可以凍結行和列，並結合使用colspan或rowspan屬性。

Answer 3

Fix標頭相對簡單，易於實現。 和專欄是另一回事。

例如：

<table>
  <tr class="header"><td>header</td></tr>
  <tr><td>body</td></tr>
</table>

您必須監視onscroll envent，並檢測標題是否在視野之外。 當它不可見時，使用getBoundingClientRect（）檢索tr.header的大小參數（還包括TD）及其clientX和clientY。 通過使用cloneElement（true）創建tr.header的副本，並將其放置在同一表中。 然后將大小參數分配給它的TD，並使此克隆的元素固定在屏幕上。

盡管確實很復雜，但此解決方案不會影響表的樣式或布局。