在Angular表格中,如果有一些列需要始终可见而其他列需要水平滚动,则可以使用粘性列。但是,当粘性列和水平滚动一起使用时,一些列的大小会发生变化,这可能会破坏表格的布局。
这个问题可以通过以下步骤解决:
stickyColumns = 2;
.table { display: flex; flex-direction: column; } .table-header, .table-body { display: flex; overflow: auto; } .table-header { position: sticky; top: 0; } .sticky-col { position: sticky; left: 0; z-index: 1; }
.table-body { width: calc(100% - 200px); // subtract width of 2 sticky columns }
这样,当用户水平滚动表格时,粘性列将保持正确的大小,表格布局不会损坏。