嵌套 CSS 表格 - 嵌套 table 宽度是第一列的宽度

Question

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

目标是在缩进方面看起来像 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/

Answer 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/

嵌套 CSS 表格 - 嵌套 table 宽度是第一列的宽度

Nested CSS Tables - Nested table width is width of the first column

html

css

nested

width

css-tables