我有一个简单的固定数据表组件,基于此示例, 我将其呈现在故事书中
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>
);
}
}
问题是:表格的水平滚动没有出现,表格超出了容器的边界。