基于CSS表的布局行不是100％宽度 [英] CSS table based layout row is not extending 100% width

问题描述

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

I would like to extend the width of a css table based row to 100% browser width without breaking the layout of the rest of the content. Notice the green header bar is not extending full width even though it has been set to 100% width.

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

My code can be found here: 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>

UPDATE

已添加

position:absolute;

到标题行。

推荐答案

你的问题是因为我们不能模拟 colspan 和css。由于您在包含两个单元格的另一行上面有一行，所以此标题行应为 colspan =2。但是，由于不可能，您的选项是：

Your issue is because we cant simulate colspan with css. As you have one row above another row that contains two cells, this header row supposedly should be colspan="2". But as it is not possible, your options are:

1. 更改您的结构。


2. 希望保持结构，因为它现在是您唯一的选项设置
   您的 .header ，使用 display：table-caption; 和 caption-side：top; 如下例所示：

1. Change your structure.
2. If you want keep you structure as it is now your only option is set your .header, using display:table-caption; and caption-side:top; as the example below:

CSS：

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

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

I made a demo with your own example:

http://jsfiddle.net/3JQcb/

这篇关于基于CSS表的布局行不是100％宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！