Material-ui: 【テーブル】横スクロールテーブル本体カットオフ

問題の説明

テーブルに多数の列があり、同時に表示できない場合、デフォルトで水平スクロールバーが表示されます。 このスクロールバーを使用すると、ヘッダーは期待どおりにスクロールしますが、オーバーフローが非表示になっているため、テーブル本体がカットオフされます。 テーブルコンポーネントに `bodyStyle = {{height： 'inherit'、overflow： 'auto'}}を追加すると、2番目の水平スクロールバーが生成されます。1つは本体を適切に制御し、もう1つはヘッダーを制御します。

再現する手順

      <Table>
        <TableHeader>
          <TableRow>
            {this.props.tableHeader.map((col, i) =>
              <TableHeaderColumn style={{ width: 100 }} key={i}>{col}</TableHeaderColumn>
            )}
          </TableRow>
        </TableHeader>
        <TableBody preScanRows={false}>
          {this.props.tableData.map((row, i) => (
            <TableRow key={i}>
              {this.props.tableHeader.map((col, j) => (
                <TableRowColumn style={{ width: 100 }} key={j}>{row[col]}</TableRowColumn>
              ))}
            </TableRow>
          ))}
        </TableBody>
      </Table>

バージョン

• マテリアル-UI：0.15.0
• 反応：15.0.2
• ブラウザ：Chrome 50.0.2661.102（64ビット）