如何使用 HTML 和 CSS 對示例圖片中的“單獨控制的單元格”進行編碼？

Question

我一直在網上尋找，但沒有找到任何可以幫助制作這樣一張桌子的東西。 已經嘗試使用colspan ，但它沒有像我希望的那樣工作。

有人有其他想法嗎？

編輯：試過這個

 table, td, th { border: 1px solid black; border-collapse: collapse; width: auto; } th { /* text */ padding: 0px; margin: 0px; } td { /* pictures */ padding: 5px; text-align: left; }

 <table style="width:100%"> <tr> <td>Month</td> <td colspan="2">Savings</td> </tr> <tr> <td colspan="2">January</td> <td>$100</td> </tr> <tr> <td>February</td> <td colspan="2">$50</td> </tr> </table>

Answer 1

將“table-layout:fixed”添加到您的 css 中，如下所示：

table, td, th {
        border: 1px solid black;
        border-collapse: collapse;
        width: auto;
        table-layout: fixed;
        }
        th { /* text */
          padding: 0px;
          margin: 0px;
        }
        td { /* pictures */
          padding: 5px;
          text-align: left;
        }

要得到

Answer 2

使用 CSS 網格：

 .box { border: 1px solid black; display: grid; grid-template-columns: repeat(3, 1fr); } .box div:nth-child(4n + 1), .box div:nth-child(4n + 4) { grid-column: span 2; } .box div { outline: 1px solid; padding: 5px; }

 <div class="box"> <div>Month</div> <div>Savings</div> <div>January</div> <div>$100</div> <div>February</div> <div>$50</div> </div>