Làm cách nào để giữ cho độ rộng cột của hai bảng đồng bộ trong khi thay đổi kích thước?

Question

Tôi đã nhìn xung quanh một chút và dường như không thể tìm thấy một giải pháp tốt, mà không yêu cầu một số JavaScript điên, cho vấn đề sau đây.

Có hai bảng riêng biệt trong ví dụ. Đầu tiên chỉ dành cho các tiêu đề. Thứ hai là cho cơ thể. Chúng tôi cần hai bảng vì yêu cầu đối với tính năng này là bảng cơ thể có thể cuộn cục bộ, có nghĩa là các tiêu đề cần được hiển thị khi cuộn bảng được cuộn xuống. Chúng tôi không thể sử dụng bất kỳ bảng tổng hợp HTML 5 ưa thích mới nào vì chúng tôi phải hỗ trợ IE.

Có cách nào để thực hiện điều này bằng CSS thuần túy không? Nó không phải là hoàn hảo, chỉ cần miễn là nó trông khá là tất cả những gì tôi cần.

Answer 1

Chắc chắn có thể thực hiện được chỉ trong CSS. Chỉ cần thiết lập độ rộng trên cả hai bảng, trs và tds, áp dụng gói từ và đặt bố cục bảng thành cố định. Cài đặt cuối cùng này làm cho nó sử dụng độ rộng cột được xác định, thay vì được xác định bởi chiều rộng của nội dung ô.

#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

Đây là mẫu của khái niệm, sử dụng Jquery. (Bạn có thể làm điều đó vani, nhưng đòi hỏi nhiều mã)

<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:

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(); 

Không "javascript điên": D
Dưới đây là một fiddle làm việc, với một vài css để làm cho nó trông tốt hơn: http://jsfiddle.net/5mfVT/

Answer 3

Sắp xếp lại kích thước bảng càng nhỏ càng tốt. Bảng tiêu đề của bạn có nội dung hẹp hơn và do đó có thể thay đổi kích thước thành độ rộng nhỏ hơn trước khi thu nhỏ để thay đổi kích thước.
Giải pháp không phải Javascript là xác định chiều rộng cho tất cả các cột của bạn hoặc để xác định thuộc tính min-width bảng của bạn phù hợp với chiều rộng lớn hơn của hai chiều rộng tối thiểu.