im trying to implement a horizontal scrollbar on table with sticky header, the problem is scrollbar is not appearing when i implement stickiness. it can only be scrolled via trackpad and not by a mouse. im using ng2 smart table for angular
<ng2-smart-table
*ngIf="showMainTable"
[settings]="settings"
[source]="localDataSource"
(edit)="rowEdited($event, 'edit')"
(editConfirm)="rowEdited($event, 'editConfirm')"
></ng2-smart-table>
styles
: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;
}
the host and deep are angular selectors, it applies style to the table generated by that i wrapped the table in a container and i was able to implement the scroll functionality, but the table lost its stickiness. i want the headers to be sticky and table to have a fixed horizontal scrollbar at the bottom which is always visible.
i wrapped the table in a container
<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>
style
.table-flow {
overflow-x: scroll;
}
it displays the scrollbar but i lost the sticky headers
Codesandbox Link https://codesandbox.io/s/elastic-satoshi-7ycxm
你的表流需要是位置:相对至少,你需要将他的最大宽度设置为 100%,然后设置溢出:自动 :)
i have fixed this issue by providing the container a fixed max height, that way it will have the sticky header and scrolling as well.
.table-flow {
max-height: 555px;
overflow-x: scroll;
max-width: auto;
position: relative;
}
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;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.