首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >纯CSS固定表标头

纯CSS固定表标头
EN

Stack Overflow用户
提问于 2018-11-07 23:12:44
回答 1查看 209关注 0票数 0

新的CSS/SCSS,我的表比屏幕更宽,所以我希望标题与表格的其余部分一起左右移动。我还希望标题保持不变,而不是在表中上下滚动,这样如果您向下滚动到右边,您仍然可以知道这些值属于哪些列。我不能把桌子变小。我正在使用React,并且尝试过反应-粘性-桌子,但是它似乎不能正常工作。

代码语言:javascript
运行
复制
.fixed_table_wrapper {
  width: 500px;
  overflow-x:scroll;
}

.fixed_header{
    width: 500px;
    table-layout: fixed;
    border-collapse: collapse;
}

.fixed_header tbody{
  display:block;
  width: 100%;
  overflow-x: scroll;
  height: 100px;
}

.fixed_header thead tr {
   display: block;
}

.fixed_header thead {
  background: black;
  color:#fff;
}

.fixed_header th, .fixed_header td {
  padding: 5px;
  text-align: left;
  width: 350px;

}
代码语言:javascript
运行
复制
<div class="fixed_table_wrapper">
<table class="fixed_header">
  <thead>
    <tr>
      <th>Col 1</th>
      <th>Col 2</th>
      <th>Col 3</th>
      <th>Col 4</th>
      <th>Col 5</th>
      <th>Col 6</th>
      <th>Col 7</th>
      <th>Col 8</th>
      <th>Col 9</th>
      <th>Col 10</th>
      <th>Col 11</th>
      <th>Col 12</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>row 1-0</td>
      <td>row 1-1</td>
      <td>row 1-2</td>
      <td>row 1-3</td>
      <td>row 1-4</td>
      <td>row 1-0</td>
      <td>row 1-1</td>
      <td>row 1-2</td>
      <td>row 1-3</td>
      <td>row 1-4</td>
      <td>row 1-3</td>
      <td>row 1-4</td>
    </tr>
    <tr>
      <td>row 2-0</td>
      <td>row 2-1</td>
      <td>row 2-2</td>
      <td>row 2-3</td>
      <td>row 2-4</td>
      <td>row 1-0</td>
      <td>row 1-1</td>
      <td>row 1-2</td>
      <td>row 1-3</td>
      <td>row 1-4</td>
    </tr>
    <tr>
      <td>row 3-0</td>
      <td>row 3-1</td>
      <td>row 3-2</td>
      <td>row 3-3</td>
      <td>row 3-4</td>
      <td>row 1-0</td>
      <td>row 1-1</td>
      <td>row 1-2</td>
      <td>row 1-3</td>
      <td>row 1-4</td>
      <td>row 1-3</td>
      <td>row 1-4</td>
    </tr>
    <tr>
      <td>row 4-0</td>
      <td>row 4-1</td>
      <td>row 4-2</td>
      <td>row 4-3</td>
      <td>row 4-4</td>
      <td>row 1-0</td>
      <td>row 1-3</td>
      <td>row 1-4</td>
      <td>row 1-1</td>
      <td>row 1-2</td>
      <td>row 1-3</td>
      <td>row 1-4</td>
    </tr>
    <tr>
      <td>row 5-0</td>
      <td>row 5-1</td>
      <td>row 5-2</td>
      <td>row 5-3</td>
      <td>row 5-4</td>
      <td>row 1-0</td>
      <td>row 1-1</td>
      <td>row 1-2</td><td>row 1-3</td>
      <td>row 1-4</td>
      <td>row 1-3</td>
      <td>row 1-4</td>
    </tr>
    <tr>
      <td>row 6-0</td>
      <td>row 6-1</td>
      <td>row 6-2</td>
      <td>row 6-3</td>
      <td>row 6-4</td>
      <td>row 1-0</td>
      <td>row 1-1</td><td>row 1-3</td>
      <td>row 1-4</td>
      <td>row 1-2</td>
      <td>row 1-3</td>
      <td>row 1-4</td>
    </tr>
    <tr>
      <td>row 7-0</td>
      <td>row 7-1</td>
      <td>row 7-2</td>
      <td>row 7-3</td>
      <td>row 7-4</td>
      <td>row 1-0</td>
      <td>row 1-1</td><td>row 1-3</td>
      <td>row 1-4</td>
      <td>row 1-2</td>
      <td>row 1-3</td>
      <td>row 1-4</td>
    </tr>
    <tr>
      <td>row 7-0</td>
      <td>row 7-1</td>
      <td>row 7-2</td>
      <td>row 7-3</td>
      <td>row 7-4</td>
      <td>row 1-0</td>
      <td>row 1-1</td>
      <td>row 1-2</td>
      <td>row 1-3</td><td>row 1-3</td>
      <td>row 1-4</td>
      <td>row 1-4</td>
    </tr>
    <tr>
      <td>row 7-0</td>
      <td>row 7-1</td>
      <td>row 7-2</td>
      <td>row 7-3</td>
      <td>row 7-4</td>
      <td>row 1-0</td>
      <td>row 1-1</td><td>row 1-3</td>
      <td>row 1-4</td>
      <td>row 1-2</td>
      <td>row 1-3</td>
      <td>row 1-4</td>
    </tr>
    <tr>
      <td>row 7-0</td>
      <td>row 7-1</td>
      <td>row 7-2</td>
      <td>row 7-3</td>
      <td>row 7-4</td>
      <td>row 1-0</td><td>row 1-3</td>
      <td>row 1-4</td>
      <td>row 1-1</td>
      <td>row 1-2</td>
      <td>row 1-3</td>
      <td>row 1-4</td>
    </tr>
    <tr>
      <td>row 7-0</td>
      <td>row 7-1</td>
      <td>row 7-2</td>
      <td>row 7-3</td>
      <td>row 7-4</td>
      <td>row 1-0</td>
      <td>row 1-1</td>
      <td>row 1-2</td>
      <td>row 1-3</td><td>row 1-3</td>
      <td>row 1-4</td>
      <td>row 1-4</td>
    </tr>
    <tr>
      <td>row 7-0</td>
      <td>row 7-1</td>
      <td>row 7-2</td>
      <td>row 7-3</td>
      <td>row 7-4</td>
      <td>row 1-0</td>
      <td>row 1-1</td>
      <td>row 1-2</td>
      <td>row 1-3</td><td>row 1-3</td>
      <td>row 1-4</td>
      <td>row 1-4</td>
    </tr>
    <tr>
      <td>row 7-0</td>
      <td>row 7-1</td>
      <td>row 7-2</td>
      <td>row 7-3</td>
      <td>row 7-4</td>
      <td>row 1-0</td><td>row 1-3</td>
      <td>row 1-4</td>
      <td>row 1-1</td>
      <td>row 1-2</td>
      <td>row 1-3</td>
      <td>row 1-4</td>
    </tr>
    <tr>
      <td>row 7-0</td>
      <td>row 7-1</td>
      <td>row 7-2</td>
      <td>row 7-3</td>
      <td>row 7-4</td>
      <td>row 1-0</td>
      <td>row 1-1</td><td>row 1-3</td>
      <td>row 1-4</td>
      <td>row 1-2</td>
      <td>row 1-3</td>
      <td>row 1-4</td>
    </tr>
    <tr>
      <td>row 7-0</td>
      <td>row 7-1</td>
      <td>row 7-2</td>
      <td>row 7-3</td>
      <td>row 7-4</td>
      <td>row 1-0</td>
      <td>row 1-1</td><td>row 1-3</td>
      <td>row 1-4</td>
      <td>row 1-2</td>
      <td>row 1-3</td>
      <td>row 1-4</td>
    </tr>
    <tr>
      <td>row 7-0</td>
      <td>row 7-1</td>
      <td>row 7-2</td>
      <td>row 7-3</td>
      <td>row 7-4</td>
      <td>row 1-0</td>
      <td>row 1-1</td><td>row 1-3</td>
      <td>row 1-4</td>
      <td>row 1-2</td>
      <td>row 1-3</td>
      <td>row 1-4</td>
    </tr>
    <tr>
      <td>row 7-0 asdhjkl;wejf;lkjs</td>
      <td>row 7-1 asdhjkl;wejf;lkjs</td>
      <td>row 7-2 asdhjkl;343gwefgsdwejf;lkjs</td>
      <td>row 7-3 asdhjkl;wejf;lkjs</td>
      <td>row 7-4 asdhjkl;wejf;lkjs</td>
      <td>row 1-0 asdhjkl;wejf;lkjs</td>
      <td>row 1-1 asdhjkl;wejf;lkjs</td><td>row 1-3</td>
      <td>row 1-4</td>
      <td>row 1-2 asdhjkl;wejf;lkjs</td>
      <td>row 1-3 asdhjkl;wejf;lkjs</td>
      <td>row 1-4 asdhjkl;wejf;lkjs</td>
    </tr>
  </tbody>
</table>
</div>

我正试着创造一张桌子。这是我的标准;

  1. 头必须是固定的。
  2. 垂直和水平滚动。我正在工作的桌子比屏幕本身宽。
  3. 有固定的列大小是可以的。

基本上,滚动左-右,向上-向下,仍然有标题在顶部,以引用您正在查看的单元格。

我意识到增加一个固定的列宽的唯一方法。在附加的代码页中,我似乎无法得到与之匹配的列的大小。据我所知,列中较长的数据导致了对齐问题。我已经尝试过overflow: hidden;来防止这种情况,但它似乎忽略了它。它似乎也忽略了我试图设置宽度。如果你能看一看我的代码笔尝试。

我真的很感谢你的帮助。谢谢。

EN

回答 1

Stack Overflow用户

发布于 2020-05-19 13:42:03

对于粘性桌面,有一个npm包,为此,我建议,将节省您的时间和精力。检查一下:你要做的就是把一个组件包在你的桌子上,就像:

代码语言:javascript
运行
复制
<StickyHeader>
  <table>
    <thead>
      <tr><th>Head</th></tr>
    </thead>
    <tbody>
      <tr><td>Data</td></tr>
    </tbody>
  </table>
</StickyHeader>
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/53199312

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档