如何將 3 列平均分成 2 列？

Question

我有一個表的以下 React JSX 代碼：

 <table> <tr> <td>col1</td> <td>col2</td> <td>col3</td> </tr> </table>

我想添加一個 2 列填充整個寬度的頁腳，但我無法做到這一點。 我嘗試了 colspan 但它沒有按預期工作。 我怎樣才能做到這一點？

Answer 1

您可以使用 colspan 執行此操作，您需要考慮的是 colspan 應該是整數 (1,2,3) 並且不能有 1.5 之類的值。

所以訣竅是在你的第一行也使用 colspan 並給他們一個 colspan 2，這樣總數是 6，你可以除以兩列 3。

 <table border="1"> <tr> <td colspan="2">col1</td> <td colspan="2">col2</td> <td colspan="2">col3</td> </tr> <tr> <td colspan="3">footer1</td> <td colspan="3" >footer2</td> </tr> </table>

Answer 2

只需在所有 3 個單元格上跨頁腳單元格。 然后在該頁腳表中添加一個單獨的表並制作 2 列。 不要忘記使內表盡可能精簡（沒有邊框，沒有邊距，..你需要它）

 <table border="1"> <tr> <td>col1</td> <td width="400">col2</td> <td>col3</td> </tr> <tr> <td colspan="3"> <table width="100%"> <tr> <td width="50%">footer left</td> <td width="50%">footer right</td> </tr> </table> </td> </tr> </table>