宽度：100% 不能在带有显示的 div 内的 div 上工作：table答案

【问题标题】：width: 100% not working on div inside a div with display: table宽度：100% 不能在带有显示的 div 内的 div 上工作：table
【发布时间】：2015-03-20 07:37:14
【问题描述】：

我正在尝试为我的 div 结构创建一个表头。 <div class="table-header"> 必须在 <section> 内。

由于某种原因，<div class="table-header">'s width: 100% 不起作用。显然是因为它的父级有“显示：表”。将其父级设置为 width: 100% 也无济于事。

我尝试过设置“display: table-header-group”，运气也一样。

你可以在这里找到一个 jsfiddle：

http://jsfiddle.net/xvr1otxs/21/

HTML

<section class="table">
    <div class="table-header"><div>header<a>weee</a></div></div>
    <article class="table-row">
        <div>
            <p>a</p>
        </div>
        <div>
            <p>b</p>
        </div>
        <div class="small first">
            <p>c</p>
        </div>
        <div class="small last">
            <p>d</p>
        </div>
        <div>
            <p>e</p>
        </div>
        <div>
            <p>f</p>
        </div>
    </article>
</section>

CSS

 *{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
 *{margin:0;padding:0;}
 html,body{width:100%;height:100%;}
 body{font-size:12pt;line-height:1;letter-spacing:0;font-family:Arial;}

 .table-header{display: table-header-group;}
 .table{display:table;table-layout:fixed;width:100%;height:100%;}
 .table-row{display:table-row;}
 .table-row>*{display:table-cell;height:100%;vertical-align:top;}
 .table-row>*:nth-child(odd){background:tomato;}
 .table-row>*:nth-child(even){background:lightblue;}
 .table-row>.small{display:inline-block;width:100%;height:100%;}
 .table-row>.small.first{height:100px;overflow-y:scroll;}
 .table-row>.small.last{height:calc(100% - 100px);}
 a{float:right;}
 .table-header, .table-header div{width:100%;}

【问题讨论】：

display: table-caption; jsfiddle.net/MelanciaUK/xvr1otxs/23
工作，谢谢:)）如果你愿意，我会接受它！

标签： html css

【解决方案1】：

这是因为您的 div.table-header 必须具有与 div.table-row 相同的列数。在使用 css 表时，您不能像 colspan 属性那样合并多个列。因此，一个解决方案是改用表格。

【讨论】：

【解决方案2】：

您可以将.table-header 显示设置为table-caption：

.table-header {
    display: table-caption;
}

Demo

【讨论】：