J'utilise Angular le tableau de données sur les matériaux dans mon application. Je dois afficher plusieurs colonnes avec une table de défilement horizontale. Je suis confronté à un problème avec la bordure de la rangée de la table. Il n'affiche pas toute la largeur de la ligne. Veuillez vérifier l'image ci-jointe pour votre référence. S'il vous plaît aidez-moi à résoudre ce problème.
S'il vous plaît vérifier le lien pour la référence de code
https://stackblitz.com/edit/angular-mdxik6?file=app%2Ftable-basic-example.html
Merci d'avance.
La ligne d'en-tête et la ligne de colonne affichent flex par défaut.
.mat-header-row, .mat-row {
display: inline-flex;
}
Utiliser la grille d'affichage en cas d'écrans d'ipad et d'appareil mobile
mat-table {
display: -ms-grid ;
display: grid;
}
Vous avez des propriétés de style qui fonctionnent les unes contre les autres. Vous avez défini min-width: 150px;
pour chaque colonne et vous avez 13 colonnes qui totalisent 1950px. De plus, vous avez défini width: 1123px;
sur chaque ligne, ce qui est (évidemment) inférieur à 1950px. En outre, vous définissez max-width: 1123px;
- même largeur que vos lignes - sur le tableau lui-même, mais le tableau doit être plus large que la ligne pour afficher la barre de défilement. Si vous corrigez ces problèmes, la bordure s'affichera correctement. Essayez de définir uniquement la largeur de vos lignes en omettant les paramètres de largeur des tableaux et des colonnes.
Les gars, cela vous aidera à résoudre ces problèmes
Vous devez commencer à utiliser:
largeur: max-contenu;
.mat-row,
.mat-header-row {
min-width: 1123px;
width: 100%;
width: max-content;
}
.mat-table {
overflow: scroll;
max-height: 500px;
}
.mat-cell,
.mat-header-cell {
min-width: 90px;
}
/*unnecessary to make table header fixed*/
.mat-header-row {
top: 0;
position: sticky;
z-index: 1;
background-color: inherit;
text-align: center;
}
trouver un support pour les navigateurs: https://caniuse.com/#search=fit-content
Cela pourrait aider quelqu'un d'autre car il s'agit d'un ancien post. Veuillez vous référer à https://stackblitz.com/edit/angular-mdxik6-gnpzuh?embed=1&file=app/table-basic-example.css
Ajoutez simplement ce qui suit à votre-comp-composant.css ou à votre-comp-composant.scss
.mat-row, .mat-header-row {
min-width: 2800px;
width: 100%;
}
Meilleure résolution, j'ai surmonté ce problème.
Tenir la colonne de données dynamique avec css
columns = [
{columnDef: 'select', width: 75},
...........
]
Recalculer la largeur minimale css si vous implémentez une fonction afficher/masquer
recalculateCss() {
let cellWidth = 0;
for (let i = 0; i < this.selected.length; i++) {
const cell = this.selected[i];
const column = this.columns.filter((value, index) => value.columnDef === cell);
cellWidth += column[0] ? column[0].width : 0;
}
this.minWidth = cellWidth;
}
Ajouter des css à la fois dans mat-header-row et mat-row
[style.min-width.px]="minWidth"
Vous devez définir ce qui est attendu de la table dans mat-table {min-width} ainsi que les rembourrages gauche et droit de la ligne-mat (24px chacun).
Dans votre cas d'exemple:
.mat-table {
min-width: calc((13 * 150px) + 48px);
}
ou
.mat-table {
min-width: 1998px;
}
J'espère que cela t'aides!!!
Material utilise une mise en page flexible de sorte que vous puissiez ajouter align-self: stretch;
aux colonnes CSS. Cela devrait permettre d’étirer les éléments à taille automatique pour les adapter à la table.
Modifier
Enlever votre en-tête et votre élément de largeur de cellule peut vous aider. Vous souhaitez définir une largeur de 100% pour vos lignes, puis définir le minimum souhaité.
.mat-row, .mat-header-row {
min-width: 1123px;
width:100%;
}