使 div 填充具有未指定尺寸的表格單元格的整個寬度和高度

Question

 table, th, td, div { font-family: Arial; padding: 1em; border-style: solid; border-collapse: collapse; text-align: center; } div { writing-mode: vertical-rl; background-color: #ddd; border-color: #bbb; }

 <table> <tr> <td>one</td> <td>two</td> <td>three</td> </tr> <tr> <td rowspan="2"> <div>four</div> </td> <td>five</td> <td>six</td> </tr> <tr> <td>seven</td> <td>eight</td> </tr> </table>

所需的結果是表格單元格中的div看起來更像這樣：

請注意，“四個” div填充了圖像中表格單元格的整個寬度和高度，但不在代碼段中。

有一些與此類似的問題建議使用絕對定位，這在這種確切情況下（根據我的嘗試）在具有未指定寬度和高度的桌子上不起作用。 其他答案說沒有 JavaScript 就沒有辦法做到這一點。 但這些答案來自 2010 年。任何意見將不勝感激。

Answer 1

如果您對一些課程沒問題，那么您可以實現圖像中顯示的內容。

 table, th, td, div { font-family: Arial; padding: 1em; border-style: solid; border-collapse: collapse; text-align: center; } .spl { writing-mode: vertical-rl; border-style: none; } .inb { background-color: #ddd; }

 <table> <tr> <td>one</td> <td>two</td> <td>three</td> </tr> <tr> <td rowspan="2" class="inb"> <div class="spl">four</div> </td> <td>five</td> <td>six</td> </tr> <tr> <td>seven</td> <td>eight</td> </tr> </table>

Answer 2

您可以按如下方式使用 jQuery 來獲取該父td的（外部）寬度和高度並將其應用於該div

 $(document).ready(function() { var cellwidth1 = $('.x1').outerWidth(); var cellheight1 = $('.x1').outerHeight(); $('.x2').css({ 'height': cellheight1, 'width': cellwidth1 }); });

 * { box-sizing: border-box; } table, th, td, div { font-family: Arial; padding: 1em; border-style: solid; border-collapse: collapse; text-align: center; } td.x1 { padding: 0; } div.x2 { writing-mode: vertical-rl; background-color: #ddd; border-color: #bbb; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table> <tr> <td>one</td> <td>two</td> <td>three</td> </tr> <tr> <td class="x1" rowspan="2"> <div class="x2" >four</div> </td> <td>five</td> <td>six</td> </tr> <tr> <td>seven</td> <td>eight</td> </tr> </table>

Answer 3

在嘗試了很多事情之后，似乎到 2020 年，除非您使用絕對/相對定位，否則在沒有 JavaScript 的情況下拉伸div以填充表格單元格的所有可用空間似乎是不可能的。

絕對定位的缺點是單元格不會隨着其中的內容而擴展，甚至不擴展表格單元格似乎在移動設備上損壞（在 IOS14 上用 iphoneXS 測試）

dev-sbx.github.io/x

這里唯一真正的解決方案似乎是使用與 HTML 表格相對的 CSS 網格布局。