使用列數不均勻的 rowspan 時如何刪除表中的空白區域？

Question

我試圖創建一個表，其中第一行作為父行，rowspan 和下面的其他行作為子行。 我提供了下面的示例，有人可以告訴我如何擺脫第一行的空白區域嗎？ 如果 rowspan 內的任何文本很大並且需要超過 1 行，則會出現空白區域。 我試圖在第一行中包含第 4 個 td 標簽並顯示：無它，但仍然沒有用。

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/> <table class="table table-bordered" style="table-layout: fixed;"> <colgroup> <col span="1" style="width: 20%;"> <col span="1" style="width: 40%;"> <col span="1" style="width: 20%; white-space: normal;"> <col span="1" style="width: 20%;"> <col span="1" style="width: 20%;"> </colgroup> <tr> <th>Year</th> <th>Month</th> <th>Savings</th> <th>Savings for holiday!</th> <th>Random Words</th> </tr> <tr id='haha'> <td rowspan="3">2020</td> <td rowspan="3">January</td> <td rowspan="3">text in here should be long enough to take more than 1 row</td> </tr> <tr> <td>$100</td> <td>Hello</td> </tr> <tr> <td>$200</td> <td>There</td> </tr> </table> </body>

Answer 1

檢查這是否適合您！

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" /> <table class="table table-bordered" style="table-layout: fixed;"> <thead class="thead-dark"> <tr> <th scope="col">Year</th> <th scope="col">Month</th> <th scope="col">Savings</th> <th scope="col">Savings for holiday!</th> <th scope="col">Random Words</th> </tr> </thead> <tbody> <tr id='haha'> <td rowspan="2">2020</td> <td rowspan="2">January</td> <td rowspan="2">text in here should be long enough to take more than 1 row</td> <td>$100</td> <td>Hello</td> </tr> <tr> <td>$200</td> <td>There</td> </tr> </tbody> </table>

在jsfiddle上試試這個