固定数据表宽度不调整容器

Question

我有一个简单的固定数据表组件，基于this example 我在故事书上渲染它

import React, { Component } from 'react';
var FixedDataTable = require('fixed-data-table');
const {Table, Column, Cell} = FixedDataTable;

export default class IndexPage extends Component{
    render() {      
        return (
            <div className='container'>             
                <div className='row'>
                    <div className='col-md-2'></div>
                    <div className='col-md-8'>
                        <Table
                            rowHeight={50}
                            headerHeight={50}
                            rowsCount={3}
                            width={1000}
                            height={500}
                            {...this.props}>
                            <Column
                              header={<Cell>Col 1</Cell>}
                              cell={<Cell>Column 1 static content</Cell>}
                              width={200}
                              flexGrow={1}
                              fixed={true}
                            />
                            <Column
                              header={<Cell>Col 2</Cell>}
                              cell={<Cell>Column 2 static content</Cell>}
                              width={200}
                              flexGrow={1}
                            />
                            <Column
                              header={<Cell>Col 3</Cell>}
                              cell={<Cell>Column 3 static content</Cell>}
                              width={200}
                              flexGrow={1}
                            />
                        </Table>
                    </div>    
                    <div className='col-md-2'></div>
                </div>
            </div>  
        );  
    }
}

问题是： 表格的水平滚动没有出现，表格超出了容器的边界。

Answer 1

您需要在中间 div 中添加溢出规则，以便在子项（表格）增长大于百分比宽度时进行处理。尝试在中间的 div 中添加：overflow-x: scroll;。