2014-10-07 18 views
6

tôi đang gặp khó khăn thực hiện như sau:cột cố định và tiêu đề với CSS/JS góc

  1. Fix tiêu đề của bảng
  2. Fix 4/5 cột đầu tiên đóng băng và phần còn lại để di chuyển ngang
  3. bảng nên được bên trong một div đó là chiều cao và chiều rộng cố định

tôi có thể sửa tiêu đề, tôi không thể đạt đượC# 2. Bảng nằm bên trong một ngăn trên trang. Vì vậy, tôi không thể thực sự sử dụng position:absolute để sửa các cột để đạt đượC# 2.

Tôi đã thử vài ví dụ trực tuyến để đạt được điều này, nhưng tôi cần phải tạo một chỉ thị JS góc để thực hiện việc này. Tôi mới đến AngularJS, tuy nhiên, tôi đã cố gắng để tinh chỉnh ví dụ dưới đây nhưng không có may mắn.

https://www.pointblankdevelopment.com.au/blog/angularjs-fixed-header-scrollable-table-directive

Bất kỳ giúp đỡ về một cách CSS để làm được điều này cũng sẽ giúp.

Tôi cũng đã thêm người chia sẻ cho những gì tôi đang cố gắng thực hiện. Vì vậy, tôi muốn đóng băng 2 cột đầu tiên trong ví dụ.

http://plnkr.co/edit/iKwNrqT1Gy1oDvyK6FFN?p=preview

+0

Sẽ hữu ích nếu bạn thiết lập jsbin/jsfiddle/plunker với các nỗ lực của bạn. – haki

+0

Tôi đã cố gắng sử dụng nhiều bảng như http://jsfiddle.net/zS7Ny/ nhưng tôi không muốn sử dụng 2 bảng vì dữ liệu là một danh sách duy nhất mà tôi cần lặp lại hai lần. –

+0

Bạn muốn cuộn ngang chỉ áp dụng cho 'cột cụ thể'? Bạn đã thử [answer] này (http://stackoverflow.com/a/21778035/967638) từ jthe. – Amarnath

Trả lời

-1

Nếu bạn chỉ cần thêm nhiều hàng khác vào thead nó sẽ tự động sửa chữa chúng cho bạn là định hướng các cuộc gọi đến làm.

Xem ở đây: http://embed.plnkr.co/CmJBfd/preview

Như vậy, tất cả các bạn phải làm là đặt một lớp tùy chỉnh trên các hàng của bạn mà bạn không muốn trông giống như tiêu đề và phong cách họ như các hàng.

+1

Điều này không có cột cố định như được yêu cầu –

Các vấn đề liên quan