Material-ui: [표] 가로 스크롤 테이블 본문 잘림

문제 설명

테이블에 동시에 표시할 수 없는 많은 열이 있는 경우 기본적으로 가로 스크롤 막대가 나타납니다. 이 스크롤바를 사용할 때 헤더는 예상대로 스크롤되지만 오버플로가 숨겨져 있으므로 테이블 본문이 잘립니다. Table 구성요소에 `bodyStyle={{height: 'inherit', overflow: 'auto'}}를 추가하면 두 번째 수평 스크롤바가 생성되는데, 하나는 본문을 적절하게 제어하고 다른 하나는 헤더를 제어합니다.

재현 단계

      <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
• 브라우저: 크롬 50.0.2661.102(64비트)