reactjs - React 固定データ テーブルをレスポンシブにする

Question

次のように、divにテーブルがあります。

<div className="second-row-container">

    <Table
        rowsCount={this.state.myTableData.length}
        rowHeight={50}
        headerHeight={50}
        width={9*150}
        height={(this.state.myTableData.length+1)*50}>
        <Column
            header={<Cell>Delivery</Cell>}
            cell={props => (
                <Cell {...props}>
                    {this.state.myTableData[props.rowIndex].delivery}
                </Cell>
            )}
            width={150}
        />
        <Column
            header={<Cell>Category</Cell>}
            cell={props => (
                <Cell {...props}>
                    {this.state.myTableData[props.rowIndex].age}
                </Cell>
            )}
            width={150}
        />
        <Column
            header={<Cell>Language</Cell>}
            cell={props => (
                <Cell {...props}>
                    {this.state.myTableData[props.rowIndex].language}
                </Cell>
            )}
            width={150}
        />
        <Column
            header={<Cell>Target market</Cell>}
            cell={props => (
                <Cell {...props}>
                    {this.state.myTableData[props.rowIndex].market}
                </Cell>
            )}
            width={150}
        />
        <Column
            header={<Cell>Valid from</Cell>}
            cell={props => (
                <Cell {...props}>
                    {this.state.myTableData[props.rowIndex].valid_from}
                </Cell>
            )}
            width={150}
        />
        <Column
            header={<Cell>Valid till</Cell>}
            cell={props => (
                <Cell {...props}>
                    {this.state.myTableData[props.rowIndex].valid_till}
                </Cell>
            )}
            width={150}
        />
        <Column
            header={<Cell>Visibility</Cell>}
            cell={props => (
                <Cell {...props}>
                    {this.state.myTableData[props.rowIndex].visibility}
                </Cell>
            )}
            width={150}
        />
        <Column
            header={<Cell></Cell>}
            cell={props => (
                <Cell {...props}>

                </Cell>
            )}
            width={150}
        />
        <Column
            header={<Cell></Cell>}
            cell={props => (
                <Cell {...props}>

                </Cell>
            )}
            width={150}
        />
    </Table>

</div>

そしてcssには次のものがあります：

.second-row-container{
  height: 50vh;
  background-color: lightgray;
  padding: 0.5%;
  width: 100%;
}

親の幅を 100% にすると、画面を縮小すると常にテーブルが縮小されると思いましたが、そうではありません。

テーブルを親 div に合わせるにはどうすればよいですか。小さな画面では、列 3、4、5、および 6 を非表示にする必要があります。どうすればこれを達成できますか？