我如何使我的CSS滚动固定到表头和第一列(我也开放使用JS或JQuery的想法)

How do I make my CSS scrolling fixed to table header and the first column (I'm also open to the idea using JS or JQuery)

本文关键字：一列 JQuery JS CSS 滚动 我的 何使 表头      更新时间：2023-09-26

我正在努力保持左列，我的项目名称是从滚动时从我的矩阵表左右移动。我还希望在滚动条上下移动时保持顶部标题表不滚动。我能在CSS中做到这一点吗?我正在使用bootstrap。如果有必要，我可以用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>

两天前我也遇到过同样的问题。我做这件事的方法是把两个桌子一个放在另一个下面。上面的表格是标题，下面的表格是表格主体。因此，"header"表将放置在位置上，第二个表将需要overflow:auto。此外，你应该从第二个表中删除滚动条，让它保持它的宽度。

这个实现的缺点是你应该为你的两个表的所有列定义宽度，使它们适合彼此。

顺便说一下，您可以在css中为th和td定义text-align: center。

如果你需要更多的帮助，请告诉我。

相关文章：