如何通過 CSS 並排放置兩張桌子？

Question

 .page { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 20px; }.items { float: left; }.secondItem { vertical-align: text-top; float: right; }.page-header table, th, td { border: 1px solid; display: block; background-color: white; opacity: 80%; table-layout: fixed; }.tableBody { display: inline-block; width: 100%; }

 <div className="page"> <Typography> <table className="items"> <tbody> <tr> <th className="header">items:</th> </tr> <th> Hi </th> </tbody> <tbody className="tableBody"> {Items.map((item, i) => ( <td key={item.id}> item:{item.id} <br /> </td> ))} </tbody> </table> <Table className="secondItem"> <TableHead> <TableRow> <TableCell>Second:</TableCell> </TableRow> <TableRow> <TableCell> Item </TableCell> </TableRow> </TableHead> <tbody className="secondBody"> <td> {seconds.map((second) => ( <tr key={second.id}> {second.data.text} </tr> ))} </td> </tbody> </Table> <br /> </Typography> </div> ); };

我想將兩張桌子並排放置，但第二張桌子現在放在第一張桌子下方。 如何設置樣式以使桌子彼此相鄰？

我已經添加了我的代碼，並為 CSS 嘗試了許多方法，例如 float:left、float:right 等。我目前是初學者，不知道如何設置表格的樣式。

Answer 1

一個簡單的方法是使用flexbox 。

在父組件上設置display: flex以及一個flex-direction: row屬性來顯式地將flex項目的方向設置為水平。

這是一個簡單的示例： https://jsfiddle.net/o6rqsLfj/ 。

我還強烈建議使用本指南來了解 flexbox 的工作原理。

 .wrapper { height: 300px; width: 400px; background-color: pink; display: flex; flex-direction: row; }.item { height: 100px; width: 100px; margin: 10px; background-color: yellow; }

 <div class="wrapper"> <div class="item"></div> <div class="item"></div> </div>

Answer 2

使用display:inline-flex來解決這個問題

 .container { width: 100%; }.table { width: 45%; display: inline-flex; }

 <div class="container"> <div class="table one"> <table>...</table> </div> <div class="table two"> <table>...</table> </div> </div>