如何使CSS滾動固定在表標題和第一列上（我也對使用JS或JQuery的想法持開放態度）

Question

當我從矩陣表向左和向右移動時，我一直在努力保持滾動顯示我的項目名稱所在的左列。 我還希望在上下滾動條時不滾動頂部標題表。 我可以在CSS中執行此操作嗎？ 我正在使用引導程序。 如果需要，我可以在JavaScript或JQuery中做到這一點。 我嘗試將代碼更改為具有固定的標頭，但看起來一團糟。

我的小提琴代碼

 div.scroll { width: 99%; height: 100px; overflow: scroll; } 

 <h1><strong>Inventories</strong></h1> <div class="scroll"> <table class="table table-striped" style="width:1500px"> <thead> <tr> <th></th> <th style="text-align: center">Atlanta</th> <th style="text-align: center">Detroit</th> <th style="text-align: center">Orlando</th> <th style="text-align: center">Rochester</th> <th style="text-align: center">Bellevue </th> <th style="text-align: center">Madison </th> <th style="text-align: center">Santa Barbara </th> <th style="text-align: center">Bismarck </th> <th style="text-align: center">Ann Arbor</th> <th style="text-align: center">Sioux Falls</th> </tr> </thead> <tbody> <tr> <td style="text-align: center ">Apple MacBook Air</td> <td style="text-align: center ">3</td> <td style="text-align: center ">2</td> <td style="text-align: center ">4</td> <td style="text-align: center ">3</td> <td style="text-align: center ">4</td> <td style="text-align: center ">2</td> <td style="text-align: center ">4</td> <td style="text-align: center ">3</td> <td style="text-align: center ">2</td> <td style="text-align: center ">4</td> </tr> <tr> <td style="text-align: center ">Asus Zenbook</td> <td style="text-align: center ">3</td> <td style="text-align: center ">5</td> <td style="text-align: center ">4</td> <td style="text-align: center ">4</td> <td style="text-align: center ">3</td> <td style="text-align: center ">5</td> <td style="text-align: center ">4</td> <td style="text-align: center ">3</td> <td style="text-align: center ">5</td> <td style="text-align: center ">4</td> </tr> <tr> <td style="text-align: center ">Dell XPS</td> <td style="text-align: center ">7</td> <td style="text-align: center ">5</td> <td style="text-align: center ">4</td> <td style="text-align: center ">7</td> <td style="text-align: center ">5</td> <td style="text-align: center ">4</td> <td style="text-align: center ">7</td> <td style="text-align: center ">5</td> <td style="text-align: center ">4</td> <td style="text-align: center ">4</td> </tr> <td style="text-align: center ">Acer Travelmate P645.</td> <td style="text-align: center ">3</td> <td style="text-align: center ">2</td> <td style="text-align: center ">4</td> <td style="text-align: center ">3</td> <td style="text-align: center ">2</td> <td style="text-align: center ">4</td> <td style="text-align: center ">3</td> <td style="text-align: center ">2</td> <td style="text-align: center ">4</td> </tr> <tr> <td style="text-align: center ">Sony Vaio Pro 13 Touch</td> <td style="text-align: center ">3</td> <td style="text-align: center ">5</td> <td style="text-align: center ">4</td> <td style="text-align: center ">3</td> <td style="text-align: center ">5</td> <td style="text-align: center ">4</td> <td style="text-align: center ">3</td> <td style="text-align: center ">5</td> <td style="text-align: center ">4</td> </tr> <tr> <td style="text-align: center ">Samsung ATIV Book 9 Plus 13-inch (2015)</td> <td style="text-align: center ">7</td> <td style="text-align: center ">5</td> <td style="text-align: center ">4</td> <td style="text-align: center ">7</td> <td style="text-align: center ">5</td> <td style="text-align: center ">4</td> <td style="text-align: center ">7</td> <td style="text-align: center ">5</td> <td style="text-align: center ">4</td> <td style="text-align: center ">4</td> </tr> <td style="text-align: center ">HP Spectre X360.</td> <td style="text-align: center ">3</td> <td style="text-align: center ">2</td> <td style="text-align: center ">4</td> <td style="text-align: center ">3</td> <td style="text-align: center ">2</td> <td style="text-align: center ">4</td> <td style="text-align: center ">3</td> <td style="text-align: center ">2</td> <td style="text-align: center ">4</td> <td style="text-align: center ">4</td> </tr> <tr> <td style="text-align: center ">MacBook</td> <td style="text-align: center ">3</td> <td style="text-align: center ">5</td> <td style="text-align: center ">4</td> <td style="text-align: center ">3</td> <td style="text-align: center ">2</td> <td style="text-align: center ">4</td> <td style="text-align: center ">3</td> <td style="text-align: center ">2</td> <td style="text-align: center ">4</td> <td style="text-align: center ">4</td> </tr> <tr> <td style="text-align: center "> UX305</td> <td style="text-align: center ">7</td> <td style="text-align: center ">5</td> <td style="text-align: center ">4</td> <td style="text-align: center ">3</td> <td style="text-align: center ">2</td> <td style="text-align: center ">4</td> <td style="text-align: center ">3</td> <td style="text-align: center ">2</td> <td style="text-align: center ">4</td> <td style="text-align: center ">3</td> </tr> <tr> <td style="text-align: center ">Lenovo ThinkPad T450s (Business Laptop)</td> <td style="text-align: center ">7</td> <td style="text-align: center ">5</td> <td style="text-align: center ">4</td> <td style="text-align: center ">3</td> <td style="text-align: center ">2</td> <td style="text-align: center ">4</td> <td style="text-align: center ">3</td> <td style="text-align: center ">2</td> <td style="text-align: center ">4</td> <td style="text-align: center ">4</td> </tr> </tbody> </table> </div> 

Answer 1

前兩天我遇到了同樣的問題。 我進行此工作的方法是使兩個表一個接一個。 因此，頂表將是表頭，而底表將是表主體。 因此，“ header”表將就位，第二個表將需要overflow:auto 。 另外，您應該從第二個表中刪除滾動條以使其保持寬度。

此實現的缺點是您應該為兩個表的所有列定義寬度，以使它們正確地相互適配。

順便說一句，您可以在th和td css中定義text-align: center 。

如果您需要更多幫助，請告訴我。