如何使一个 div 中的三个表在调整大小时不重叠？

Posted 2023-02-21

【中文标题】如何使一个 div 中的三个表在调整大小时不重叠？

【英文标题】：How do I make three tables in one div not overlap on resizing?

【发布时间】：2017-07-03 18:57:06

【问题描述】：

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

这是返回表格的代码：

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

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

我对表格缩放字体和所有东西的宽度/高度都很好，因为这对于低分辨率显示器来说甚至更好。

【问题讨论】：

如果我不使用样式，默认情况下，表格将相互重叠。所以我认为这不是解决方案。现在，它把他们推到了三个不同的角落？

通常 flexbox 非常适合响应式内容。 flexbox 项目不会相互重叠（当然，如果您愿意，也可以这样做......）。有时我甚至对表格使用 flexbox，以使表格在变得非常小时时能够更改布局。

我会研究一下 flexbox。谢谢。

【参考方案1】：

您可以对 div 使用引导程序。这是代码。按原样使用。希望它对你有用:-)。

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>

【讨论】：

使用该示例使网格更小（或浏览器）时它们仍然重叠。

【参考方案2】：

在您的表格容器中使用calc：

div 
    width: calc(100% / 3);

【讨论】：

您必须添加更多细节。在哪里？