嵌套显示：显示中的表格行：table-cell

Question

我遇到了html嵌套显示的问题：显示中的表格行：table-cell。我试图在表格单元格中嵌入几个表格行。

以下是html structure来说明问题：

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

换句话说：

• 显示元素：table-cell应该只嵌套在display：table-row元素的内部。
• 显示元素：table-row应该只嵌套在display：table
元素的内部

因此，将display：table元素直接放在display：table-cell元素中是有效的。但是有一个显示元素是无效的：table-row直接位于display：table-cell元素内。