嵌套显示：显示中的表格行：表格单元格

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.

我对html嵌套显示有一些问题：显示中的表行：table-cell。我试图在表格单元格中嵌入几个表格行。

Here is a html structure to illustrate the issue:

这是一个用于说明问题的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>

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?

为什么带有“row1_cell2_subrow”类的“div”不占用其父级的100％宽度？它的边界怎么没有显示？

1 个解决方案

#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.
显示元素：table-cell应该只直接嵌套在display：table-row元素中。
An element of display:table-row should only be nested directly inside of an element of display:table
显示元素：table-row应该只嵌套在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.

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

#1