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

Question

我在 display:table-cell 中遇到 html 嵌套 display:table-row 的问题。我正在尝试在表格单元格中嵌套几个表格行。

这里有一个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

换句话说：

• display:table-cell 的元素只能直接嵌套在 display:table-row 的元素内。
• display:table-row 的元素只能直接嵌套在 display:table 的元素中

因此，将 display:table 的元素直接放在 display:table-cell 的元素内是有效的。但是直接在 display:table-cell 的元素中包含 display:table-row 的元素是无效的。