Bảng tbody cuộn trong IE8

Question

Trong dự án của tôi, tôi đang cố gắng thực hiện di chuyển tbody trong IE8. Tôi biết nó có thể được cuộn bằng cách chỉ cho overflow: auto đến tbody. Nhưng điều này không hoạt động trong IE8. Để làm cho nó hoạt động trong IE8, tbody phải được cấp position: absolute (hoặc float: left cho cả hai thead và tbody). Nếu tôi thực hiện công việc overflow: auto thì độ rộng mà tôi đã gán cho các phần tử th và td tính theo phần trăm sẽ bị bỏ qua. mà không cho phép tr chiếm toàn bộ chiều rộng trong thead và tbody. Do đó, có một không gian khó chịu giữa tr và tbody/thead.

Vui lòng kiểm tra điều này demo trong IE8. (hoạt động tốt trong firefox và chrome)

và đây là mã trong fiddle.

Dưới đây là những điểm nghiêm ngặt mà tôi không thể thay đổi

• Width td và th phải nằm trong tỷ lệ phần trăm.
• Tôi không thể thay đổi đánh dấu HTML
• Nó phải được giải quyết chỉ bằng CSS.

Thực ra, tôi đã giải quyết nó với một sửa chữa bẩn mà là như sau

th:after,td:after{ /* only to the last column, first occurence */ 
    content: "..................................................."; 
    visibility: hidden; 
} 

Đoạn mã trên cũng có thể được kiểm tra bằng cách cho nhiều dấu chấm để một td/th cụ thể trong các công cụ phát triển

Mã ở trên có vẻ ổn nhưng tôi chỉ cần cung cấp bộ chọn giả :after giả cho hàng đầu tiên cột cuối cùng th và tr. Nếu tôi cung cấp cho mỗi th và tr thì bố cục sẽ rối tung lên. và cũng phải tăng dots nếu khoảng trống giữa tr và tbody là nhiều hơn. Sau đó ofcourse này có thể đạt được chỉ tự động mà tôi không thể làm trong dự án hiện tại của tôi.

PS: Tôi có thể làm điều đó hoàn toàn sai. Tôi chỉ chia sẻ những nỗ lực của mình khi tôi đạt đến rất gần kết quả.

Answer 1

Tôi đã tìm thấy hai cách để giải quyết vấn đề này trong IE8.

              1)     Thêm thêm td yếu tố width: 0px-tr 's của thead và tbody.

IE8 demo

              2)     Thêm một lá thư ẩn nội dung của after selector giả.

tr:after{ 
     content: "."; 
     visibility: hidden; 
    } 

Tôi đã thêm ở trên vào css có điều kiện. bởi vì vấn đề chỉ ở IE8. (tôi đã không kiểm tra trong IE9 +)

<!--[if IE 8]> 
     <style> 
      /* the above css code here */ 
     </style> 
    <![endif]--> 

IE8 demo

tôi đã sử dụng sau một bởi vì nó rất đơn giản.