Asked Aug 9th, 2017 9:32 AM 1661 0 4
  • 1661 0 4
+4

Làm thế nào để freeze table columns bằng css?

Share
  • 1661 0 4

Mình muốn hỏi cách freeze columns, để các columns còn lại có thể scroll ngang được như google sheet https://support.google.com/docs/answer/54813?hl=en Lưu ý là khi set height cho table, nó vẫn phải scroll dọc được nữa (bow)

Mình có html thế này:

<table class="table">
   <caption>Optional table caption.</caption>
   <thead>
      <tr>
         <th>Rank</th>
         <th>First Name</th>
         <th>Last Name</th>
         <th>Username</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <th scope="row">1</th>
         <td>Mark</td>
         <td>Otto</td>
         <td>@mdo</td>
      </tr>
      <tr>
         <th scope="row">2</th>
         <td>Jacob</td>
         <td>Thornton</td>
         <td>@fat</td>
      </tr>
      <tr>
         <th scope="row">3</th>
         <td>Larry</td>
         <td>the Bird</td>
         <td>@twitter</td>
      </tr>
   </tbody>
</table>

Mình muốn cố định cột Rank, còn 3 cột còn lại có thể scroll ngang được, giống như thế này:

4 ANSWERS


Answered Aug 9th, 2017 9:52 AM
Accepted
+3

Bạn tham khảo thử nhé Link: http://jsfiddle.net/emn13/YMvk9/

Share
Aug 10th, 2017 12:57 AM

Cảm ơn bạn, mình còn muốn khi nhiều hàng hơn, mình sẽ cố định height của table, lúc đó mình muốn table phải scroll dọc được nữa (bow) trong ví dụ trên là do th.headcolposition: absolute; nên nếu set heightoverflow-y: scroll cho div bọc table thì các cột th vẫn không scroll theo hàng tương ứng được.

0
| Reply
Share
Phúc Nguyễn @phucnh.dn.vn
Aug 10th, 2017 1:36 AM

Bạn tham khảo 😃 Cách 1: https://codepen.io/saiidi/pen/mePdqo => ưu tiên dùng cách này hơn, xử lý code backend thoải mái hơn cách 2 Cách 2: http://jsbin.com/nolanole/1/edit?html,js,output

+1
| Reply
Share
Aug 10th, 2017 2:00 AM

@phucnh.dn.vn tuyệt vời, cảm ơn bạn nhiều (bow), mình sẽ thử 2 cách trên của bạn.

0
| Reply
Share
Answered Aug 9th, 2017 9:55 AM
+2

Mình nghĩ bạn có thể tạo một container chưa table của bạn. Set postition: relative cho container này. Đồng thời sử dụng postition: absolute cho các ô mà thuộc cột mà bạn muốn nó cố định ở phía bên trái. Nếu muốn hiển thị thanh cuộn cho table, bạn có thể set overflow-x: auto hoặc overflow-x: scroll cho container. Bạn nên tìm hiểu thêm về thuộc tính postionoverflow trong css để hiểu rõ tác dụng của 2 thuộc tính này.

  • Position: Căn chỉnh vị trí của cho một element.
  • Overlow: Giúp sử lý khi nội dung bên trong quá lớn gây tràn.
Share
Answered Aug 24th, 2017 9:12 AM
Share
Answered Oct 1st, 4:52 AM
Share