新的CSS/SCSS,我的表比屏幕更宽,所以我希望标题与表格的其余部分一起左右移动。我还希望标题保持不变,而不是在表中上下滚动,这样如果您向下滚动到右边,您仍然可以知道这些值属于哪些列。我不能把桌子变小。我正在使用React,并且尝试过反应-粘性-桌子,但是它似乎不能正常工作。
.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;
}
<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>
我正试着创造一张桌子。这是我的标准;
基本上,滚动左-右,向上-向下,仍然有标题在顶部,以引用您正在查看的单元格。
我意识到增加一个固定的列宽的唯一方法。在附加的代码页中,我似乎无法得到与之匹配的列的大小。据我所知,列中较长的数据导致了对齐问题。我已经尝试过overflow: hidden;
来防止这种情况,但它似乎忽略了它。它似乎也忽略了我试图设置宽度。如果你能看一看我的代码笔尝试。
我真的很感谢你的帮助。谢谢。
发布于 2020-05-19 13:42:03
对于粘性桌面,有一个npm包,为此,我建议,将节省您的时间和精力。检查一下:你要做的就是把一个组件包在你的桌子上,就像:
<StickyHeader>
<table>
<thead>
<tr><th>Head</th></tr>
</thead>
<tbody>
<tr><td>Data</td></tr>
</tbody>
</table>
</StickyHeader>
https://stackoverflow.com/questions/53199312
复制相似问题