可變表內部組件寬度不起作用html css

Question

我正在嘗試用 html 和 css 構建這個 excel 表。 我一直面臨的問題是當我嘗試為不同的行添加不同數量的列時，它超出了邊界限制並自行擴展。 我的意圖是復制圖片的內容。

 table { table-layout: fixed; border-collapse: collapse; width: 100%; border: 3px solid #151515; } th, td { border: 1px solid #151515; padding: 12px; text-align: center; } th { font-weight: bold; } tfoot tr:nth-child(2) { font-weight: normal; height: 100px; } .colored td { background-color: #aaaaaa; }

 <table> <tbody> <tr> <th colspan="4" class="title">PURCHASE DETAILS</th> </tr> <tr class="colored"> <th rowspan="2">BUDGET CODE:</th> <td>Account Code</td> <td>Cost Center</td> <td>Project Code</td> <td>DEA</td> </tr> <tr> <td>5458</td> <td>22222</td> <td>3658954</td> <td>95874</td> </tr> <tr> <th>PO Number:</th> <td>PO/SC/2010/33</td> <th>Supplier:</th> <td>STORM TECH</td> </tr> <tr> <th>SOF:</th> <td>00254584</td> <th>Value (Purchase Price USD):</th> <td><b>1,084.89</b></td> </tr> </tbody> <tfoot> <tr> <th colspan="2">Plan After Award Ends:</th> <td colspan="2">Carry Over</td> </tr> </tfoot> </table>

如果有人可以提供幫助。

Answer 1

不確定表格布局是這里的最佳選擇，但可以做到。 只需為每行創建更多單元格並跨越 2 或 3 個“單元格”所需的單元格

 table { table-layout: fixed; border-collapse: collapse; width: 100%; border: 3px solid #151515; } th, td { border: 1px solid #151515; padding: 12px; text-align: center; } th { font-weight: bold; } tfoot tr:nth-child(2) { font-weight: normal; height: 100px; } .colored td { background-color: #aaaaaa; }

 <table> <tbody> <tr> <th colspan="8" class="title">PURCHASE DETAILS</th> </tr> <tr class="colored"> <th rowspan="2">BUDGET CODE:</th> <td colspan="2">Account Code</td> <td colspan="2">Cost Center</td> <td colspan="2">Project Code</td> <td>DEA</td> </tr> <tr> <td colspan="2">5458</td> <td colspan="2">22222</td> <td colspan="2">3658954</td> <td>95874</td> </tr> <tr> <th>PO Number:</th> <td colspan="3">PO/SC/2010/33</td> <th colspan="2">Supplier:</th> <td colspan="2">STORM TECH</td> </tr> <tr> <th>SOF:</th> <td colspan="3">00254584</td> <th colspan="2">Value (Purchase Price USD):</th> <td colspan="2"><b>1,084.89</b></td> </tr> </tbody> <tfoot> <tr> <th colspan="2">Plan After Award Ends:</th> <td colspan="6">Carry Over</td> </tr> </tfoot> </table>