table-layout : 절대 100 % 너비의 table-row 안의 테이블 셀을 확장하지 않음 (요소가 붕괴되지 않음)

Question

이것은 나에게 의미가 없지만 다시 CSS 전문가에게 가까이 있지 않습니다 초보자조차도).

큰 테이블의 동적 페이지 매김 테이블을 사용하고 있기 때문에 relative/absolute을 사용하고 있습니다. 나는 사용자가 클라이언트에 과부하없이 데이터를 빠르게 경험할 수 있도록하기 위해이 작업을 수행한다.

As you can see, table-row은 100 % 확장되지만 table-cell은 table-layout:fixed을 따르지 않습니다. table-cell을 확장하여 table-row 공간을 모두 채우십시오.

(측면 노트는 border-collapse: collapse 중 하나가 작동하지 않습니다.)

이 도와주세요. 미리 많은 감사드립니다!

HTML

<div class="gridTable"> 
    <div class="gridRow"> 
     <div class="gridCell">a</div> 
     <div class="gridCell">JKL;</div>  
     <div class="gridCell">Jb</div> 
    </div> 
</div> 

CSS

.gridTable{ 
display:table; 
table-layout:fixed; 
position:relative; 
border-collapse: collapse; 
} 
.gridHeaderRow{ 
top:0px; 
} 
.gridRow, .gridHeaderRow{ 
display:table-row; 
position:absolute; 
} 
.gridCell{ 
display:table-cell; 
} 
.gridTable, .gridRow, .gridHeaderRow{ 
width:100%; 
} 
.gridTable, .gridTable *{ 
border-collapse:collapse; 
} 
.gridTable div{ 
border-color:black; 
border-width:1px; 
border-style:solid; 
} 

Answer 1

내가 행 규칙에서 절대 위치를 제거하고 나를 위해 일한

(크롬, 파이어 폭스)

.gridRow, .gridHeaderRow{ 
    display:table-row; 
} 

경우에

<div class="gridTableBox"> 
    <div class="gridTable gridHeaderTable"> 
     <div class="gridRow"> 
      <div class="gridCell">T1</div> 
      <div class="gridCell">T2</div> 
      <div class="gridCell">T3</div> 
     </div> 
    </div> 
    <div class="gridTable gridBody"> 
     <div class="gridRow"> 
      <div class="gridCell">a</div> 
      <div class="gridCell">JKL;</div> 
      <div class="gridCell">Jb</div> 
     </div> 
    </div> 
</div> 

은 이제 gridHeaderTable 테이블 레이아웃을 깨지 않고 절대 positiion를 div에 GIV 수 있습니다 : 당신은 다음과 같이 헤더를 분리 할 수있는, 고정 된 헤더를 갖고 싶어.

바이올린은 here입니다.