在display：table-cell中嵌套display：table-row

Question

我在display：table-cell中的html嵌套display：table-row有一些問題。 我試圖在一個表格單元格中嵌套一些表格行。

這是一個HTML結構來說明問題：

 body { background-color:#6699cc; } .row1 { color:black; background-color:white; width: 100%; margin-bottom: 10px; margin-left: auto; margin-right: auto; border-radius: 30px; box-shadow: 10px 10px 10px black; font-family: 'MS sans serif, Fallback, sans-serif'; display:table-row; width:100%; } .row1_cell1 { width:20%; display:table-cell; vertical-align:middle; border:1px solid DarkBlue; } .row1_cell1 img{ width:100%; height:auto; } .row1_cell2 { width:80%; display:table-cell; border:1px solid #F6F934; } .row1_cell2_subrow{ display:table-row; width:100% border:3px solid red; } .subrow_cell1{ display:table-cell; width:60%; text-align:left; border:1px solid blue; } .subrow_cell2{ display:table-cell; width:40%; text-align:right; border:1px solid green; } 

 <div class="row1"> <div class="row1_cell1"> <img class="row1_cell1_image" src="http://icons.iconarchive.com/icons/mazenl77/I-like-buttons-3a/512/Cute-Ball-Go-icon.png"> </div> <div class="row1_cell2"> <div class="row1_cell2_subrow"> <div class="subrow_cell1">subrow1_cell1</div> <div class="subrow_cell2">subrow1_cell2</div> </div> <div class="row1_cell2_subrow"> <div class="subrow_cell1">subrow2_cell1</div> <div class="subrow_cell2">subrow2_cell2</div> </div> </div> </div> 

為什么類“ row1_cell2_subrow”的“ div”沒有占據其父級的100％寬度？ 邊界怎么也沒有顯示？

Answer 1

為了有效，您的嵌套需要遵循以下形式：

table > table-row > table-cell > table > table-row > table-cell

換一種說法：

• display：table-cell的元素僅應直接嵌套在display：table-row的元素內。
• display：table-row的元素只能直接嵌套在display：table的元素內

因此，將display：table元素直接放置在display：table-cell元素內部是有效的。 但是將display：table-row元素直接放在display：table-cell元素內部是無效的。