Tabla de material angular Dimensionamiento / desplazamiento

Solución:

Agregar

.example-container {
  overflow-x: scroll;
}

A app.component.css para arreglar la barra superior. La parte inferior necesitará un estilo similar. No puede usar width: 100% porque técnicamente está fuera de la mesa. Por lo que no puede recoger el ancho automáticamente.

Espero que esto sea de ayuda para que otros agreguen el desplazamiento horizontal a la tabla de mat y el ancho de la columna de acuerdo con el contenido de la celda.

.mat-table {
  overflow-x: scroll;
}

.mat-cell,
.mat-header-cell {
  word-wrap: initial;
  display: table-cell;
  padding: 0px 10px;
  line-break: unset;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  vertical-align: middle;
}

.mat-row,
.mat-header-row {
  display: table-row;
}

---

---

Utiliza Nuestro Buscador