css - 我怎样才能使我的显示 : table; DIV fill the horizontal width of the DIV containing it?

Question

我有以下代码:

<div class="rep_tb0" style="width: 100%">
    <div class="rep_tr0" style="width: 100%">
        <div class="rep_td0" style="width: 100%" id="ActivityLog">Activity Log</div>
    </div>
</div>

.rep_tb0 {display: table; }
.rep_tb0 {padding: 5px;}
.rep_tb0 {border-collapse:collapse; }
.rep_tr0 {display: table-row;}
.rep_td0 {display: table-cell; padding: 5px; vertical-align:top; }
.rep_td0 {border: 1px solid #666; }

我想要的是让包含单词 Activity Log 的表水平扩展以填充包含它的 DIV。请注意，DIV 有一个宽度设置，但它可能很容易改变。如您所见，我尝试在三个地方设置宽度，但都没有用。

如何在不设置宽度(以像素为单位)的情况下使其水平填充区域。

请不要忘记我正在使用 display: table;这些不是普通的 DIV :-)

Answer 1

我通常制作一个我想要的大小和相对位置的容器；和一个具有绝对值的内部 div，如下所示:

<div id="container">
    <div id="content">Content</div>
</div>

然后 css 看起来像这样:

#container{
    width:70%;
    min-width:600px;
    height: 600px;
    background:#000;
    border:medium;
    border-color:#CCC;
    border-radius:10px;
    display:block;
}
#content{
    position:absolute;
    display:block;
    top:0;
    left:0;
    width:100%;
    height:100%;
}