嵌套 CSS 表 - 嵌套表宽度是第一列的宽度答案

【问题标题】：Nested CSS Tables - Nested table width is width of the first column嵌套 CSS 表 - 嵌套表宽度是第一列的宽度
【发布时间】：2015-05-05 20:34:38
【问题描述】：

我正在尝试获取列中元素的一些信息（示例中为一、二、三、四）。该元素具有子元素（在示例中为五、六、七、八）。我试图让子元素是父 table_div 的 95% 宽度，但是，它是父 table_div 第一列的 95% 宽度。

目标是在缩进方面看起来像 Reddit 评论布局。如何使该子元素与父元素的宽度相同，而不是与第一列的宽度相同？

HTML：

<div class='table_div root'>
    <div class='table_row'>
        <span class='table_cell'>one</span>
        <span class='table_cell'>two</span>
        <span class='table_cell'>three</span>
        <span class='table_cell'>four</span>
    </div>

    <div class='table_div child'>
        <div class='table_row'>
            <span class='table_cell'>five</span>
            <span class='table_cell'>six</span>
            <span class='table_cell'>seven</span>
            <span class='table_cell'>eight</span>
        </div>
    </div>
</div>

CSS：

.table_div {
    display: table;
    width:100%;
}

.table_row {
    display: table-row;
    width: 100%;
}

.table_cell {
    display: table-cell;
}

.root {
    width: 100%;
}

.child {
    width: 95%;  
    margin-left: 5%;
}

http://jsfiddle.net/z168q2xg/2/

【问题讨论】：

为什么不使用实际的 TABLE 标签而不是破解 DIV？
因为使用表格进行布局并不是很好的做法，而且其中一些表格单元格跨度可能会变成比文本更复杂的元素。
将 DIV 转换为表格单元格相当于同一件事：您正在使用表格进行布局。你真正需要的是 Flexbox。 html5rocks.com/en/tutorials/flexbox/quick
我愿意使用它，有我可以修改的表格示例作为概念证明吗？我想在尝试学习嵌套表之前确保它可以正常工作。

标签： html css nested width css-tables

【解决方案1】：

HTML：

<div class='comments'>
    <div class='comment-container'>
        <div class='comment-header'>
            <div class='comment-user'>Test User 1</div>
            <div class='comment-date'>03/04/2015 2:12 PM</div>
            <div class='comment-id'>3221</div>
        </div>
        <div class='comment-body'>This is my sample comment.</div>
        <div class='comment-replies'>
            <div class='comment-container'>
                <div class='comment-header'>
                    <div class='comment-user'>Test User 3</div>
                    <div class='comment-date'>03/04/2015 2:13 PM</div>
                    <div class='comment-id'>3232</div>
                </div>
                <div class='comment-body'>Replying to commentor</div>
                <div class='comment-replies'></div>
            </div>
            <div class='comment-container'>
                <div class='comment-header'>
                    <div class='comment-user'>Test User 4</div>
                    <div class='comment-date'>03/04/2015 2:15 PM</div>
                    <div class='comment-id'>3241</div>
                </div>
                <div class='comment-body'>OMG Another comment</div>
                <div class='comment-replies'></div>
            </div>
            <div class='comment-container'>
                <div class='comment-header'>
                    <div class='comment-user'>Test User 7</div>
                    <div class='comment-date'>03/04/2015 2:16 PM</div>
                    <div class='comment-id'>3521</div>
                </div>
                <div class='comment-body'>This is my sample comment.</div>
                <div class='comment-replies'>
                    <div class='comment-container'>
                        <div class='comment-header'>
                            <div class='comment-user'>Test User 1</div>
                            <div class='comment-date'>03/04/2015 2:12 PM</div>
                            <div class='comment-id'>3621</div>
                        </div>
                        <div class='comment-body'>This is my sample comment.</div>
                        <div class='comment-replies'></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class='comment-container'>
        <div class='comment-header'>
            <div class='comment-user'>Test User 2</div>
            <div class='comment-date'>03/04/2015 2:15 PM</div>
            <div class='comment-id'>4221</div>
        </div>
        <div class='comment-body'>Replying to OP</div>
        <div class='comment-replies'></div>
    </div>
</div>

CSS：

.comments {
    display: block;
    width:100%;
    background-color: #CCFFFF;
}
.comment-container {
    display: block;
    width:95%;
    border: 1px solid black;
}
.comment-container + .comment-container {
    border-top: 0px;
}
.comment-replies {
    border-right: 0px solid black;
}
.comment-replies > .comment-container {
    margin-left:5%;
    border-right: 1px ;
    border-bottom: 0px;
}
.comment-replies .comment-replies {
     border-right: 0px;
}
.comment-user {
    width: 25%;
    background-color: #99FFCC;
}
.comment-date {
    width: 40%;
    background-color: #C2C2FF;
}
.comment-id {
    float: right;
    background-color: #FFCC99;
    width: 35px;
    margin-right: 0px !important;
}
.comment-header > div {
    display: inline-block;
    margin-right: 5px;
}

http://jsfiddle.net/z168q2xg/15/

【讨论】：

这不包括列布局。
@douggard 您可以将comment-text 元素替换为所需的结构。我现在正在开会，但我会在之后更新示例。
这会导致相同深度的子元素的列不对齐。 jsfiddle.net/z168q2xg/5
孩子为什么要跟家长排队？您是将数据放在其他“列”中还是用于按钮之类的东西。
孩子需要和其他同深度的孩子排队，而不是和父母一起排队。我想要这个，因为它看起来不错。未对齐的数据很难查看。示例：jsfiddle.net/z168q2xg/7 但子元素的宽度为父元素的 95%，而不是父元素的第一列。