css 表中的水平滚动条附加位置固定

nqwrtyyt 于 2023-05-02 发布在其他

关注(0)|答案(3)|浏览(161)

一个包含不同表格的div，所有表格都应该水平滚动，而第一个表格必须固定在页面顶部，因此在垂直滚动时也可以看到。
有办法让它工作吗？看看小提琴：https://jsfiddle.net/1eu69ozm/8/

.table-container {
  max-width: 100%;
  overflow-x: auto;
  position: relative;
}

#firstTableWrapper {
  position: fixed;
}

<div class="table-container">
  <div id="firstTableWrapper">
    <table id="firstTable" class="tableClass">
      <tr class="trFirst">
        <th>
          <span>Make</span>
        </th>
        <td>Harley-Davidson</td>
        <td>BMW</td>
        <td>Honda</td>
        <td>Yamaha</td>
        <td>Ducati</td>
        <td>Kawasaki</td>
      </tr>
    </table>
  </div>
  <table class="tableClass">
    <tr>
      <th>
        <span>Model</span>
      </th>
      <td>Street Glide</td>
      <td>R 1250 GS Adventure</td>
      <td>CBR600RR</td>
      <td>YZF-R6</td>
      <td>Panigale V2</td>
      <td>Ninja ZX-10R</td>
    </tr>
    <tr>
      <th>
        <span>Color</span>
      </th>
      <td>Black</td>
      <td>White</td>
      <td>Red</td>
      <td>Blue</td>
      <td>Red</td>
      <td>Green</td>
    </tr>
  </table>
</div>

css

来源：https://stackoverflow.com/questions/76101875/horizontal-scroll-in-table-attached-with-position-fixed

3条答案

按热度按时间

ki1q1bka1#

我在这篇文章发表后不久就明白了
只需要添加maxwidth和overflow-x，我想我以前试过，但没有max-width。.

#firstTableWrapper {
      position: fixed;
      max-width: 100%;
      overflow-x: auto;
    }

赞(0）回复(0）举报 2023-05-02

64jmpszr2#

正如Rafael Bento所说，使用<thead></thead>和<tbody></tbody>标记。你的max-width:100%;overflow-x:auto;overflow-y:hidden如果使用bootstrap 5响应表，效果最好。

赞(0）回复(0）举报 2023-05-02

7ivaypg93#

除非有固定的列宽，否则不应拆分为两个表。使用thead和tbody，并用position: sticky固定thead是最好的方法。这样，可以自动计算列的宽度，同时保持数据对齐。

.table-container {
  height: 170px;
  border: 1px solid red;
  overflow: scroll;
  max-width: 400px;
}
.tableClass {
  border-collapse: collapse;
}
.tableClass thead {
  position: sticky;
  top: 0;
  background: orange;
}
.tableClass tbody {
  height: 150px;
}
.tableClass th, .tableClass td {
  white-space: nowrap;
  padding: 2px 4px;
}

<div class="table-container">
  <table id="firstTable"  class="tableClass">
    <thead>
      <tr>
        <th><span>Make</span></th>
        <td>Harley-Davidson</td><td>BMW</td><td>Honda</td><td>Yamaha</td><td>Ducati</td><td>Kawasaki</td>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th><span>Model</span></th><td>Street Glide</td><td>R 1250 GS Adventure</td><td>CBR600RR</td><td>YZF-R6</td><td>Panigale V2</td><td>Ninja ZX-10R</td>
      </tr>
      <tr>
        <th><span>Color</span></th>
        <td>Black</td><td>White</td><td>Red</td><td>Blue</td><td>Red</td><td>Green</td>
      </tr>
      <tr>
        <th><span>Year</span></th>
        <td>2022</td><td>2021</td><td>2019</td><td>2020</td><td>2021</td><td>2022</td>
      </tr>
      <tr>
        <th><span>Year</span></th>
        <td>2022</td><td>2021</td><td>2019</td><td>2020</td><td>2021</td><td>2022</td>
      </tr>
      <tr>
        <th><span>Year</span></th>
        <td>2022</td><td>2021</td><td>2019</td><td>2020</td><td>2021</td><td>2022</td>
      </tr>
      <tr>
        <th><span>Year</span></th>
        <td>2022</td><td>2021</td><td>2019</td><td>2020</td><td>2021</td><td>2022</td>
      </tr>
      <tr>
        <th><span>Year</span></th>
        <td>2022</td><td>2021</td><td>2019</td><td>2020</td><td>2021</td><td>2022</td>
      </tr>
    </tbody>  
  </table>
</div>

赞(0）回复(0）举报 2023-05-02

我来回答

css 表中的水平滚动条附加位置固定

3条答案

相关问题

热门标签

最新问答