Question

我正在尝试为我的div结构创建一个表现为表格的标题。 <div class="table-header">必须位于<section>。

内

出于某种原因，<div class="table-header">的宽度：100％不起作用。显然是因为它的父母有“display：table”。将其父级设置为宽度：100％也无济于事。

我尝试用同样的运气设置“display：table-header-group”。

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

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%;}

Answer 1

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

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

Demo

Answer 2

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

width：100％不使用display：table在div内的div上工作

2 个答案: