IE8에서 tbody 열을 제외합니다.

Question

페이지에 여러 테이블을 표시하는 데 문제가 있습니다.

테이블 코드는 매우 간단합니다. CSS는 각 td의 너비를 %로 설정하고 table-layout은 fixed입니다.

첫 번째 테이블에 X 열이 있지만 두 번째 테이블에 X + 3이 있기 때문에 문제가 발생한 것 같습니다. 마지막 열이 테이블 본문에서 제외됩니다. DOM을 검사 할 때

, 나는 오른쪽의 마지막 열 (디자인) 테이블 본체의 외부에있는 것을 볼 수 있지만 코드 테이블 본체 내부에 존재할 수 있습니다. 나는 CSS에서 table-layout:fixed를 제거하면

는 테이블이 중복,하지만 마지막 컬럼에 등 올바른 CSS 배경 - 색상을 적용한다. 이것은 테이블 레이아웃을 그대로두고 width : 100 % 속성을 제거 할 때도 발생합니다. 그래서 그것은 고정 테이블 너비가 처음부터 모든 테이블에서 유지되고있는 문제 일 수도 있습니다.

나는이 강하게이 SO answer.

어떤 아이디어 관련이있을 수 있습니다 생각?

<div> 
    <table> 
     // th elements 
     <tbody> 
      <tr> 
       <td>1</td> 
      </td> 
     </tbody> 
    </table> 
</div> 
<div> 
    <table> 
     // th elements 
     <tbody> 
      <tr> 
       <td>1</td> 
       <td>2</td> 
      </tr> 
     </tbody> 
    </table> 
</div> 

Answer 1

이 솔루션은 내가 예상 한 것과 같습니다.

IE (및 다른 브라우저)는 첫 번째 표의 첫 번째 행을 기반으로 모든 표 레이아웃을 기반으로합니다.

다양한 양의 열이있는 한 페이지에 여러 개의 테이블이있는 경우 테이블 끝에서 테이블의 끝에 매달려있는 상황이 발생할 수 있습니다.

어떤 사람들은 위의 colgroup 및 col 속성을 사용하도록 제안했지만이 기능은 저에게 맞지 않습니다.

대신 원본의 상단에 숨겨진 thead을 생성하여 필요한 최대 열을 포함 시켰습니다.

<thead> 
     <tr hidden="hidden"> 
      <th span="1"></th> 
      <th span="3"></th> 
      <th span="3"></th> 
      <th span="3"></th> 
      <th span="1"></th> 
      <th span="2"></th> 
     </tr> 
    </thead> 
    <thead> 
     // My actual table headers 
    </thead>