jquery - 基于 CSS 表格的布局行未扩展 100% 宽度

Question

我想将基于 CSS 表格的行的宽度扩展到浏览器宽度的 100%，而不破坏其余内容的布局。请注意，即使已将绿色标题栏设置为 100% 宽度，它也不会扩展到全宽。

我的代码可以在这里找到: http://codepen.io/anon/pen/HfnFv

CSS

html,body{
    overflow:visible;
    height:100%;padding:0;margin:0;
}
.header{background:green;position:absolute;}
.table{
    display:table;
    width:100%;
  position:relative;
    min-height:100%;
}
.trow{
    display:table-row;
    width:100%;
}
.left{
    width:30%;
    height:100%;
    background-color:#990000;
    color:#efefef;
    display:table-cell;
}
.left p{
    margin:100px 0;
}
.right{
    width:70%;
    height:100%;
    background-color:blue;
    color:#efefef;
    display:table-cell;
}

HTML

<div class="table">
<div class="trow header">
<p>
test
</p>
</div>
<div class="trow">
<div class="left">
<p>
test
</p>
</div>
<div class="right">
test
</div>
</div>
</div>

更新

已添加

position:absolute;

到标题行。

但我希望看到一个不绝对定位子元素的替代解决方案。

Answer 1

你的问题是因为我们无法用 css 模拟 colspan。由于一行位于包含两个单元格的另一行之上，因此该标题行应该是 colspan="2"。但由于这是不可能的，您的选择是:

1. 改变你的结构。
2. 如果你想保持你现在的结构，你唯一的选择是设置 您的 .header，使用 display:table-caption; 和 caption-side:top; 作为以下示例:

CSS:

.trow.header{
    width:100%;
    display:table-caption;
    caption-side:top;
    background:green;
}

我用你自己的例子做了一个演示:

http://jsfiddle.net/3JQcb/