带有粘性标题的表格上的水平滚动条
带有粘性标题的表格上的水平滚动条
提问于 2019-12-19 15:51:06
我正在尝试实现一个带有粘性标题的表格的水平滚动条，问题是当我实现粘性时滚动条不出现。它只能通过触控板滚动，不能通过鼠标滚动。即时通信工具使用ng2智能表用于angular
<ng2-smart-table
*ngIf="showMainTable"
[settings]="settings"
[source]="localDataSource"
(edit)="rowEdited($event, 'edit')"
(editConfirm)="rowEdited($event, 'editConfirm')"
></ng2-smart-table>样式
:host /deep/ ng2-smart-table table tr td:first-child {
position: sticky;
left: 0;
z-index: 1;
background: white !important;
// box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
border-left: none !important;
border-right: none !important;
border-top: none !important;
border-bottom: solid 1px #f4f2f0 !important;
box-shadow: 10px 0 10px -2px rgb(245, 241, 241) !important;
}
:host /deep/ ng2-smart-table table tr th:first-child {
position: sticky;
left: 0;
width: 100px;
z-index: 2;
background: white !important;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}
:host /deep/ ng2-smart-table table tr th:first-child {
z-index: 2;
background: white !important;
}
:host /deep/ ng2-smart-table table thead tr {
position: sticky;
white-space: nowrap;
padding: 10px 40px !important;
top: 0;
background: white !important;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}
:host /deep/ ng2-smart-table table thead th {
position: sticky;
top: 0;
background: white !important;
border: none;
color: #ccc;
cursor: pointer;
white-space: nowrap;
padding: 0;
height: 56px;
padding-left: 56px;
vertical-align: middle;
outline: none !important;
color: rgba(0, 0, 0, 0.54);
font-size: 12px;
font-weight: 500;
}
:host /deep/ ng2-smart-table table tr:nth-child(1) th {
// display: inline-flex !important;
white-space: nowrap;
padding: 10px 40px !important;
}
:host /deep/ .ng2-smart-sort-link {
// display: inline-flex !important;
color: rgba(0, 0, 0, 0.54) !important;
font-size: 12px !important;
font-weight: 500 !important;
text-transform: uppercase;
}
:host /deep/ ng2-smart-table table tbody {
// overflow: hidden;
}
:host /deep/ ng2-smart-table table {
border: none;
}
:host /deep/ ng2-smart-table table tr td {
// display: inline-flex !important;
text-align: center !important;
height: 48px;
padding: 0 0 0 56px;
height: 48px;
font-size: 1.2rem;
font-weight: 300;
color: #111;
white-space: nowrap;
// overflow: hidden;
text-overflow: ellipsis;
border-left: none !important;
border-right: none !important;
border-top: none !important;
border-bottom: solid 1px #f4f2f0 !important;
}host和deep是角度选择器，它将样式应用于我将表包装在容器中生成的表，并且我能够实现滚动功能，但表失去了粘性。我想要的标题是粘性和表有一个固定的水平滚动条在底部，这始终是可见的。
我把桌子包在一个容器里
<div
class="table-flow"
[ngClass]="{ 'disable-cover': mainTableLoading }"
>
<ng2-smart-table
*ngIf="showMainTable"
[settings]="settings"
[source]="localDataSource"
(edit)="rowEdited($event, 'edit')"
(editConfirm)="rowEdited($event, 'editConfirm')"
></ng2-smart-table>
</div>风格
.table-flow {
overflow-x: scroll;
}它显示滚动条，但我丢失了粘性标题
Codesandbox链接https://codesandbox.io/s/elastic-satoshi-7ycxm
回答 3
Stack Overflow用户
回答已采纳
发布于 2019-12-19 20:26:35
我已经修复了这个问题，为容器提供了一个固定的最大高度，这样它就会有粘性的标题和滚动。
.table-flow {
max-height: 555px;
overflow-x: scroll;
max-width: auto;
position: relative;
}Stack Overflow用户
发布于 2019-12-19 15:58:10
您的表流至少需要是position:relative，并且您需要设置它的最大宽度，例如设置为100%，然后设置overflow: auto :)
Stack Overflow用户
发布于 2021-01-06 03:27:44
HTML
<div class="table-container">
<ng2-smart-table
[settings]="settings"
[source]="source"
></ng2-smart-table>
</div>CSS
.table-container {
height: 600px;
overflow-y: auto;
border-top: 1px solid #dee2e6;
}
::ng-deep table tr:first-child th {
position: sticky !important;
top: -1px;
z-index: 100;
background: white;
border: 1px solid #dee2e6;
height: 58px;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/59405354
复制相关文章
相似问题
腾讯云开发者
