Đồng bộ hóa chiều rộng cột giữa các bảng trong hai khung khác nhau, v.v ..

Question

Vì lý do nào đó không thể tránh khỏi (nhiều mã di sản, khả năng tương thích, nhu cầu thiết kế) Tôi có hai bảng, một bên dưới khác , nhưng phân chia giữa hai khung hình (xem ví dụ giả bên dưới chữ sig của tôi). Tôi cần độ rộng cột của các bảng này để đồng bộ hóa chính xác sao cho hai bảng này hoạt động như một. Lý do là để có một bảng 'tiêu đề' mà ​​sẽ không di chuyển trên một bảng 'dữ liệu' có thể cuộn.

Bây giờ, có một vài gợi ý rõ ràng chưa hoạt động.

Trước tiên, tôi đã nghe nói rằng bằng cách sử dụng CSS có một cách để đặt thanh cuộn chỉ trên các hàng của bảng, chứ không phải tiêu đề bảng, đó là hiệu ứng dự định ở đây. Thật không may, đây không phải là một lựa chọn khả thi do những lý do nêu trên.

Thứ hai, định dạng độ rộng phần trăm trên các cột. Thật không may là thanh cuộn sẽ làm hỏng điều này và giải pháp này cũng chia sẻ một vấn đề với giải pháp có thể có tiếp theo: định dạng chiều rộng pixel. Ở đây, nếu có nội dung cột rộng quá rộng, các độ rộng (px hoặc%) sẽ được ghi đè trong một bảng nhưng không phải cái kia và một chiều rộng không khớp sẽ phá vỡ tất cả các căn chỉnh dọc. Rõ ràng điều chỉnh điều này với CSS 'max-width' dường như không hoạt động.

Giải pháp cuối cùng có thể là sử dụng một số loại Javascript và DOM để tự động buộc vấn đề. Ở đây buộc một chiều rộng tối thiểu trên mỗi cột và buộc chiều rộng đáy để ghi đè lên các chiều rộng hàng đầu sẽ là đủ. Tuy nhiên, khả năng thực sự chia một bảng thành hai khi chúng chia sẻ cùng một mô hình cột/hàng sẽ khá gọn gàng. Hy vọng rằng giải pháp này là khả thi và không phải là cực kỳ phức tạp (tha thứ hiện tại của tôi thiếu kiến ​​thức RE Javascript/DOM).

Cảm ơn,

Skolem

<!-- In frame 1 (top, non-scrolling): --> 
<table id="t1" ...> (Just the header, really) 
    <tr> 
    <td>Name</td><td>User Image</td><td>Email</td><td>Favorite Language</td> 
    </tr> 
</table> 

<!-- In frame 2 (bottom, scrolling): --> 
<!-- table "t2" intended to have equal column widths --> 
<table id="t2" ...> (Data below the header) 
    <tr> 
    <!-- Lots of crazy stuff of wildly varying widths --> 
    <td>...</td><td>...</td><td>...</td><td>...</td> 
    </tr> 
</table> 

Answer 1

Đầu tiên, thiết lập chiều rộng của t1 đến t2 chiều rộng của. Sau đó, lấy mọi td từ t1 và đặt chiều rộng của nó khớp với chiều rộng của các cột t2.

Hãy thử bằng chứng khái niệm này: http://jsfiddle.net/HqpGp/.

Bạn sẽ cần jQuery và sửa đổi nó để hoạt động với khung, nhưng tôi nghĩ đó là một khởi đầu tốt. Tôi khá chắc chắn phần JS có thể được viết một cách đẹp hơn, mặc dù.

Hy vọng điều đó sẽ hữu ích!

Answer 2

Tôi không thể nhận câu trả lời được chấp nhận để làm việc trực tiếp, vì vậy tôi đã làm lại một chút, chỉ trong trường hợp nó không hoạt động cho bất kỳ ai khác.

$('.table1 tr:eq(1) td').each(function (i) { 
       var _this = $(this); 
       $('.table2 tr:eq(1) td:eq(' + i + ')').width(_this.width()); 
      });