web-dev-qa-db-fra.com

Material UI v1 - Définir la largeur des colonnes de la table

Je veux définir les largeurs de colonne sur une table d'interface utilisateur de matériau à l'aide de css (mais pas à l'intérieur, mais plutôt de "classes") . Mais je ne comprends pas comment les largeurs de colonne sont contrôlées. J'essaie de définir des largeurs sur les colonnes TH mais cela ne fonctionne pas.

Voir exemple: Exemple de table de matériaux ui (voir style.css)

Je ne comprends pas comment les largeurs de colonne de la table sont contrôlées sur le "Table simple" de la table Mui: Table simple (vous pouvez voir que la première colonne est plus large que les autres. Comment?)

Alors, comment ça marche et comment puis-je modifier les paramètres?

cssmaterial-ui
5
Galivan

Essayez d'utiliser colgroup, a travaillé pour moi dans Material-UI V1

<Table>
   <colgroup>
      <col style={{width:'10%'}}/>
      <col style={{width:'20%'}}/>
      <col style={{width:'70%'}}/>
   </colgroup>
   <TableHead>
      <TableRow>
         <TableCell>Head1</TableCell>
         <TableCell>Head2</TableCell>
         <TableCell>Head3</TableCell>
      </TableRow>
   </TableHead>
   <TableBody>
      <TableRow>
         <TableCell>Data1</TableCell>
         <TableCell>Data2</TableCell>
         <TableCell>Data3</TableCell>
      </TableRow>
   </TableBody>
</Table>
12
Pirate4

J'ai eu du succès avec ce qui suit:

<Table>
<colgroup>
    <col width="10%" />
    <col width="10%" />
    <col width="60%" />
    <col width="10%" />
    <col width="10%" />
</colgroup>
<TableHead>....
    ... yada yada...
</Table>

Ou plus précisément, avec un tableau de largeurs colWidths:

<Table key={this.props.key + "_table"} className={classes.table}>
    <colgroup>
        {this.props.colWidths.map((colWidth, i) => <col key={"colWidth_"+i} width={colWidth}/>)}
    </colgroup>
    <TableHead>
        <TableRow>
            {tableHeaders}
        </TableRow>
    </TableHead>
    <TableBody>
        {tableRows}
    </TableBody>
</Table>
0
lowcrawler

Cela semble un peu plus difficile que ma première hypothèse sans créer une sorte d’effet domino basé sur la façon dont les composants de la table sont basés, cependant j’ai trouvé cette discussion qui en a beaucoup qui cherchent à faire la même chose avec beaucoup de méthodes différentes. Je vais trier et voir ce qui fonctionne le mieux pour votre cas d'utilisation particulier (sans voir votre code, je ne sais pas ce qu'il serait le plus sûr de recommander).

De même, si nous inspectons la table, vous donnez un exemple, nous pouvons avoir une idée décente (un peu déroutant au premier abord) de la façon dont ils ont réalisé cela.

table first child 70% example

Je recommanderais aveuglément quelque chose comme <Table fixedHeader={false} style={{ width: "auto", tableLayout: "auto" }}> pour permettre à votre table de dimensionner de manière dynamique en fonction du contenu plutôt que de conserver une taille identique.

J'espère que cela vous aidera au moins à vous orienter dans la bonne direction! S'il vous plaît laissez-moi savoir si non.

0
CodeSpent

Pour donner une largeur à chaque colonne, colspan est la meilleure solution que de fixer la largeur, cela rendra le tableau sensible en fonction de la taille de l’écran/de la grille. Donc, vous pouvez mettre colSpan={4} par exemple sur les composants de colonne . Et fixer la largeur de la colonne dans le style colspan table-layout: fixed vous aidera. Ainsi, la table sera sensible mais avec une largeur fixe pour les colonnes.

0
Anoush Hakobyan

La solution qui a fonctionné pour moi utilisait tableLayout: 'fixed' ainsi que des largeurs de pixels fixes pour les colonnes. 

l'option colgroup n'a pas fonctionné. 

0
Vidro3