너비 : 100 % div에서 디스플레이가있는 div 내부에서 작동하지 않습니다.

Question

테이블로 작동하는 div 구조체의 헤더를 만들려고합니다. <div class="table-header">은 <section> 안에 있어야합니다.

어떤 이유로 든 <div class="table-header"> 님의 너비 : 100 %는 작동하지 않습니다. 외관상으로는 부모가 "display : table"을 가지고 있기 때문입니다. 상위를 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%;} 

Answer 1

당신은 설정할 수 있습니다 .table-header 디스플레이 table-caption에 :

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

당신의 div.table 헤더가 div.table 행으로 동일한 수의 열이 있어야하기 때문이다

Demo

Answer 2

. css 테이블을 사용할 때 colspan 속성과 같은 여러 열을 병합 할 수 없습니다. 그래서 해결책은 대신 테이블을 사용하는 것입니다.