如何将三个表合二为一 div 在调整大小时不重叠？

Question

我在一个面板中有三个 tables（来自 React 的固定数据-table）。它运行良好 - 但在较小的分辨率下，三个 table 将相互重叠。有没有办法使它们可扩展？

这是返回 table 的代码：

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>

它们在另一个文件中被调用为，使用 react-grid-layout：

<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 显示器上显示正常，但问题是 table 本身无法缩放，因此 f.e。在 1080p 分辨率下，它们只会相互叠加。由于我使用的是 React-grid-layout，您可以在其中调整相应面板的大小，因此需要具有分辨率的可伸缩性，因为用户可以自己更改面板大小。现在，如果您将面板变小，table 将相互重叠。

如何让它们根据父 div（可调整大小的面板）调整大小？

我对 table 缩放字体和 width/height 的一切都很满意，因为这对于低分辨率显示器来说甚至更好。

Answer 1

在您的 table 容器中使用 calc：

div {
    width: calc(100% / 3);
}

Answer 2

您可以使用 bootstrap 作为 div 。这是代码。照原样使用 is.Hope 它适合你 :-) .

return ( <div> <div className="col-md-3 col-sm-3 col-xs-3" 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 className="col-md-3 col-sm-3 col-xs-3" 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 className="col-md-3 col-sm-3 col-xs-3" 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 在调整大小时不重叠？

How do I make three tables in one div not overlap on resizing?

html

javascript

css

reactjs

fixed-data-table