web-dev-qa-db-ja.com

Material UI v1-テーブルの列幅を設定する

CSSを使用してマテリアルUIテーブルの列幅を設定したい（「クラス」を使用して内部に反応しない）。しかし、列幅がどのように制御されるのかわかりません。 TH列に幅を設定しようとしましたが、機能しません。

例を参照： Material ui table example （style.cssを参照）

Muiテーブルの「Simple Table」でテーブルの列幅がどのように制御されるのか理解できません： Simple table （最初の列が他の列よりも広いことがわかります。方法は？）

それで、それはどのように機能し、どのように設定を変更できますか？

cssmaterial-ui
11
Galivan

Material-UI V1で私のために働いたcolgroupを使ってみてください

<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

私は以下で成功しました：

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

または、より具体的には、幅の配列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

テーブルコンポーネントのベースに基づいて一種のドミノ効果を作成しないと、最初の仮定よりも少し難しいように見えますが、 私はこの議論を見つけました さまざまな方法。私はそこをソートして、特定のユースケースに最適なものを確認します（コードを確認しないと、何を推奨するのが最も安全かわかりません）。

同様に、あなたがテーブルを調べた場合、あなたが私たちに例を挙げたなら、彼らがこれをどのように達成したかについて、まともなアイデア（一見混乱するかもしれません）を得ることができます。

table first child 70% example

等しいサイズを維持するのではなく、コンテンツに基づいてテーブルのサイズを動的に変更できるように、<Table fixedHeader={false} style={{ width: "auto", tableLayout: "auto" }}>のようなものを盲目的に推奨します。

これが少なくともあなたを正しい方向に導くのに役立つことを願っています！そうでない場合はお知らせください。

0
CodeSpent

各列に幅を与えるには、colspanが幅を固定するよりも優れたソリューションです。画面/グリッドサイズに応じてテーブルが応答しやすくなります。だからあなたはcolSpan={4}たとえば、列コンポーネント。そして、列幅をcolspan table-layout: fixedスタイルが役立ちます。したがって、テーブルは応答しますが、列の幅は固定されています。

0
Anoush Hakobyan

私のために働いた解決策はtableLayout: 'fixed'および列の固定ピクセル値の幅。

colgroupオプションは機能しませんでした。

0
Vidro3