基于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:
- 更改您的结构。
- 希望保持结构,因为它现在是您唯一的选项设置
您的.header
,使用display:table-caption;
和caption-side:top;
如下例所示:
- Change your structure.
- If you want keep you structure as it is now your only option is set
your
.header
, usingdisplay:table-caption;
andcaption-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:
这篇关于基于CSS表的布局行不是100%宽度的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!