如何使CSS滚动固定在表标题和第一列上（我也对使用JS或JQuery的想法持开放态度）

Question

I am struggling trying to keep left column where my items names are from scrolling when moving left and right from my matrix table. I also want to keep the top header table from scrolling when moving up and down the scroll bar. Can I do this in CSS? I am using bootstrap. I would be ok doing it in JavaScript or JQuery if I have to. I've tried changing my code to have a fixed header, but it looks all messed up.

My code in fiddle

 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

I had the same problem two days before. The way I have made this working is to make two tables one under other. So the top table will be the header, and the bottom table will be your table body. So the "header" table will sit on place and the second table will need overflow:auto . Also you should remove the scrollbar from the second table to let it keep it's width.

The minus of this implementation is that you should define widths for all columns of your both tables to make them fit each other properly.

By the way, you can define text-align: center in your css for th and td .

Let me know please if you need more help.