2
我有三個表格（來自React的固定數據表格）。它運作良好 - 但在較小的分辨率下，三個表格將相互重疊。有沒有辦法讓它們可擴展？如何讓一個div中的三個表在調整大小時不重疊？
這裏就是返回表的代碼：
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顯示器，但問題是，表本身不能縮放，所以fe在1080p分辨率下，他們只會互相混淆。由於我使用React-grid-layout可以調整各個面板的大小，因此用戶可以自行更改面板大小，因此需要具有分辨率的可伸縮性。現在，如果您將面板設置得小一些，表格將相互重疊。
如何讓它們調整到父div（可調整大小的面板）？
我很喜歡桌子縮放字體和寬度/高度的一切，因爲這甚至會更好更低分辨率的顯示器。
如果我不使用的造型，該表將每默認情況下，彼此重疊。所以我不認爲這是解決方案。現在，它將它們推入三個不同的角落？ – cbll
通常，flexbox對於響應式內容非常有用。 Flexbox項目不會彼此重疊（當然如果您喜歡，cou可以這樣做）。有時我甚至使用flexbox甚至是表格，以使表格能夠在佈局變得非常小的時候改變佈局。 – nightlyop
我會研究flexbox。謝謝。 – cbll