크기를 조정할 때 두 테이블의 열 너비를 어떻게 동기화합니까?

Question

저는 약간 둘러 보았고 다음과 같은 문제에 대해 약간의 미친 JavaScript가 필요없는 괜찮은 해결책을 찾지 못했습니다.

의 예에서는 두 개의 테이블이 있습니다. 첫 번째 것은 헤더 용입니다. 두 번째는 시체를위한 것입니다. 이 기능에 대한 요구 사항은 본문 테이블을 로컬로 스크롤 할 수 있다는 것입니다. 즉, 테이블 본문이 스크롤 될 때 머리글을 계속 표시해야 함을 의미합니다. 우리는 IE를 지원해야하기 때문에 새로운 멋진 HTML 5 피벗 테이블을 사용할 수 없습니다.

순수 CSS로이를 수행 할 수있는 방법이 있습니까? 그것은 내가 필요로하는 모든 것만 큼 괜찮은 것처럼 보이는 한 완벽 할 필요는 없습니다.

Answer 1

CSS에서 확실히 수행 할 수 있습니다. 테이블, tr 및 tds에 너비를 설정하고, 단어 줄 바꿈을 적용하고, 테이블 레이아웃을 고정으로 설정하면됩니다. 이 마지막 설정은 셀 내용의 너비에 의해 결정되는 것이 아니라 정의 된 열 너비를 사용하게합니다.

#tb1 {  width: 80%;  } 
 

 
#tb2 {  width: 80%;  } 
 

 
#tb1 tr {  width: 100%;  } 
 

 
#tb2 tr {  width: 100%;  } 
 

 
.col1 {  width: 35%;  } 
 
.col2 {  width: 35%;  } 
 
.col3 {  width: 20%;  } 
 
.col4 {  width: 10%;  } 
 

 
#tb1, #tb2 {  table-layout: fixed;  } 
 
#tb1 td, #tb2 td {  word-wrap: break-word;  }

<table id="tb1" border="1"> 
 
    <tr> 
 
    <td class="col1">Title 1</td> 
 
    <td class="col2">Title 2</td> 
 
    <td class="col3">Title 3</td> 
 
    <td class="col4">Title 4</td> 
 
    </tr> 
 
</table> 
 

 
<table id="tb2" border="1"> 
 
    <tr> 
 
    <td class="col1">Content 00001</td> 
 
    <td class="col2">Content 02</td> 
 
    <td class="col3">Content 0000000000003</td> 
 
    <td class="col4">Content 000000000000000000004</td> 
 
    </tr> 
 
</table>

내가 당신에게 자바 스크립트 솔루션을 제공 할 수 있습니다

Answer 2

이것은 Jquery를 사용하는 개념의 샘플입니다.

는

function SetSize() { 
    var i = 0; 
    $("#tb2 tr").first().find("td").each(function() { 
     $($("#tb1 tr").first().find("td")[i]).width(
      $(this).width() 
     ); 
     i++; 
    }); 
} 
$(window).resize(SetSize); 
SetSize(); 

없음 "미친 자바 스크립트": D
다음 작업 바이올린이야, 몇 CSS와 함께 보이게 없습니다

<table id="tb1" border="1"> 
     <tr> 
      <td>Title 1</td> 
      <td>Title 2</td> 
      <td>Title 3</td> 
      <td>Title 4</td> 
     </tr> 
    </table> 

    <table id="tb2" border="1"> 
     <tr> 
      <td>Content 00001</td> 
      <td>Content 02</td> 
      <td>Content 0000000000003</td> 
      <td>Content 000000000000000000004</td> 
     </tr> 
    </table> 

JS는 (당신은 더 많은 코드를 그것을 바닐라를 수행하지만, 필요로 할 수 있습니다) 더 나은 : http://jsfiddle.net/5mfVT/

Answer 3

표는 가능한 한 작게 조정됩니다. 헤더 테이블의 내용이 좁아 크기를 조정하기 전에 작은 너비로 크기를 조정할 수 있습니다.
비 Javascript 솔루션은 모든 열에 대해 너비를 정의하거나 두 개의 최소 너비 중 큰 값에 맞는 테이블을 min-width 속성으로 정의하는 것입니다.