2
パネル内に3つのテーブル（Reactの固定データテーブル）があります。それはうまくいきますが、より小さい解像度では、3つのテーブルが互いにオーバーラップします。それらをスケーラブルにする方法はありますか？1つのdivの3つのテーブルをサイズ変更時に重ならないようにするにはどうすればよいですか？
return (
<div>
<div style = {{position: "absolute", marginTop: "15%", top: "0px", left: "0px", marginLeft: "3%"}}>
<Table
height={35 + ((18) * 30)}
width={280}
rowsCount={firstTable.length}
rowHeight={30}
headerHeight={30}>
<Column
header={<Cell>First</Cell>}
cell={<TextCell data={firstTable} col="first" />}
width={70}
/>
<Column
header={<Cell>Second</Cell>}
cell={<TextCell data={firstTable} col="second" />}
width={105}
/>
<Column
header={<Cell>Third</Cell>}
cell={<TextCell data={firstTable} col="third" />}
width={105}
/>
</Table>
</div>
<div style = {{position: "absolute", marginTop: "15%", top: "0px", right: "0px", marginRight: "3%" }}>
<Table
height={35 + ((secondTable.length) * 30)}
width={280}
rowsCount={secondTable.length}
rowHeight={30}
headerHeight={30}>
<Column
header={<Cell>First</Cell>}
cell={<TextCell data={secondTable} col="first" />}
width={70}
/>
<Column
header={<Cell>Second</Cell>}
cell={<TextCell data={secondTable} col="respBytes" />}
width={105}
/>
<Column
header={<Cell>third</Cell>}
cell={<TextCell data={secondTable} col="third" />}
width={105}
/>
</Table>
</div>
<div style = {{position: "absolute", marginBottom: "10%", bottom: "0px", right: "0", marginRight: "3%" }}>
<Table
height={35 + ((thirdTable.length) * 30)}
width={280}
rowsCount={thirdTable.length}
rowHeight={30}
headerHeight={30}>
<Column
header={<Cell>first</Cell>}
cell={<TextCell data={thirdTable} col="first" />}
width={70}
/>
<Column
header={<Cell>second</Cell>}
cell={<TextCell data={thirdTable} col="second" />}
width={105}
/>
<Column
header={<Cell>third</Cell>}
cell={<TextCell data={thirdTable} col="third" />}
width={105}
/>
</Table>
</div>
</div>
彼らは次のように別のファイルに呼び出されている、などの反応グリッドレイアウトを使用して：：
<div key={'nicetable'} className = "panel">
<div className="chart-title">
<h3 style={{cursor: "pointer", textAlign: "center"}}>Three tables!</h3>
</div>
<tableExample data={this.state.data.threetabledata } />
</div>
それは上の細かい表示
ここでテーブルが返されるコードです4kモニターを使用していますが、テーブル自体が縮尺されていないという問題があります。 1080pの解像度では、彼らはお互いに混乱してしまいます。私はReact-grid-layoutを使用しているので、それぞれのパネルのサイズを変更することができます。ユーザーはパネルのサイズを自分で変更できるので、解像度によるスケーラビリティが求められます。今、パネルを小さくすると、テーブルが重なり合って表示されます。
親div（サイズ変更可能なパネル）のサイズを変更するにはどうすればよいですか？
テーブルのスケーリングフォントと幅/高さはすべて問題ありません。解像度の低いモニタではさらに優れています。あなたのテーブルのコンテナ内
私はスタイリングを使用しない場合、テーブルは、デフォルトごとに、それぞれ他と重複します。だから私はそれが解決策だとは思わない。今、それは3つの異なるコーナーにそれらをプッシュしますか？ – cbll
一般的に、フレックスボックスは応答性の高いコンテンツに非常に適しています。フレックスボックスの項目は互いに重ならない（あなたが好きなら、もちろんcouはそうすることができる...）。フレックスボックスをテーブル用に使用して、テーブルが非常に小さくなった場合にレイアウトを変更できるようにすることもあります。 – nightlyop
私はflexboxを調べます。ありがとう。 – cbll