Как сделать Угловую Таблицу Материалов с липким первым столбцом

Question

Есть ли способ сделать Angular Material с липким первым столбцом, используя CSS?

Здесь готов редактировать код Stackblitz

Я попытался адаптировать это решение https://jsfiddle.net/zinoui/BmLpV/ но по некоторым причинам первый столбец выбрасывается из самой таблицы и теряет стилизацию.

<div class="zui-wrapper">
    <div class="zui-scroller">
        <table class="zui-table">
            <thead>
                <tr>
                    <th class="zui-sticky-col">Name</th>..........
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td class="zui-sticky-col">DeMarcus Cousins</td>
.......
                <tr>
            </tbody>
        </table>
    </div>
</div>


.zui-scroller {
    margin-left: 141px;
    overflow-x: scroll;
    overflow-y: visible;
    padding-bottom: 5px;
    width: 300px;
}
.zui-table .zui-sticky-col {
    border-left: solid 1px #DDEFEF;
    border-right: solid 1px #DDEFEF;
    left: 0;
    position: absolute;
    top: auto;
    width: 120px;
}

Answer 1

С угловой версией материала 6 это стало проще.

Можете добавить sticky тег на столбцы, которые должны быть липкими слева от таблицы и stickyEnd тег для тех, кто находится справа от таблицы.

вот пример Stackblitz

Answer 2

td:first-child, th:first-child {
  position:sticky;
  left:0;
  z-index:1;
  background-color:grey;
}

Answer 3

.mat-table-sticky:first-child {
    border-right: 1px solid #e0e0e0;
}

<ng-container
            matColumnDef="name"
            sticky
>
</ng-container>

---

`

.mat-table-sticky:first-child {
    border-right: 1px solid #e0e0e0;
}

`

---

Answer 4

Я использовал stickyEnd для достижения этой цели, как показано ниже.

 <ng-container matColumnDef="12" class="white-bg" stickyEnd>
</ng-container>

Answer 5

в template.html в таблицу (#table)

      <table mat-table #table>

====Компонент.ц

       @ViewChild(MatTable) table!: MatTable<any>;

 ngAfterViewChecked(): void {
   if (this.table) {
     this.table.updateStickyColumnStyles();
   }
 }

Answer 6

Это сработало для меня, используя;

`: host :: ng-deep .mat-cell:first-child, .mat-header-cell:first-child {

положение: липкое;

позиция: -webkit-sticky;

справа: 0;

z-индекс: 1;

фон: наследование;

border-left: сплошной серый 1px;

} `