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

Question

I am having some issue with html nested display:table-row in a display:table-cell. I am trying to nest few table-row inside a table-cell.

Here is a html structure to illustrate the issue:

 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> 

Why is that "div" with class "row1_cell2_subrow" doesn't occupy 100% width of its parent? And how comes its border is not showing either?

Answer 1

To be valid, your nesting needs to follow this form:

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

In other words:

• An element of display:table-cell should only be nested directly inside of an element of display:table-row.
• An element of display:table-row should only be nested directly inside of an element of display:table

So, it is valid to place an element of display:table directly inside of an element of display:table-cell. But it is NOT valid to have an element of display:table-row directly inside of an element of display:table-cell.