Hướng dẫn bootstrap responsive table with fixed header - bảng phản hồi bootstrap với tiêu đề cố định

Bảng cố định tiêu đề

Bootstrap 5 Bảng cố định thành phần tiêu đề

Bảng phản hồi cố định Tiêu đề được xây dựng với Bootstrap 5. Sử dụng tùy chọn này để làm cho tiêu đề bảng của bạn dính vào đầu trong khi cuộn. Ví dụ và hướng dẫn.

Nội dung chính Show

• Bảng cố định tiêu đề
• Bootstrap 5 Bảng cố định thành phần tiêu đề
• Ví dụ cơ bản
• Tiêu đề cố định DataTable
• Tài nguyên liên quan
• Bảng mở rộng tiêu đề dính của bảng bootstrap.
• Đây là một phần mở rộng cung cấp một tiêu đề dính cho bảng khi cuộn.
• Hướng dẫn từng bước một
• Khi nào nên sử dụng một bảng có tiêu đề cố định trong thiết kế web?

---

Ví dụ cơ bản

Khóa để đạt được tiêu đề bảng được cố định trên cuộn là bằng cách đặt thuộc tính position thành sticky và chỉ định "0" là giá trị của thuộc tính top cho phần tử thead.

---

Tiêu đề cố định DataTable

Sử dụng tùy chọn fixedHeader để đảm bảo rằng tiêu đề của bảng luôn hiển thị trong khi cuộn.

---

Tài nguyên liên quan

Điều đó nên là nó, và bạn nên tốt để đi.

b] Sử dụng liên kết "Chỉnh sửa trong JSFiddle" ở phía trên bên phải và chơi với nó trong JSFiddle. Sau khi điều chỉnh những gì bạn cần, bạn có thể sử dụng các bước giống như trong A] để phát triển nó tại địa phương.

Bảng mở rộng tiêu đề dính của bảng bootstrap.

 rel="stylesheet" href="extensions/sticky-header/bootstrap-table-sticky-header.css">

Đây là một phần mở rộng cung cấp một tiêu đề dính cho bảng khi cuộn.

Cách sử dụng

Thí dụ

• Tiêu đề dính data-sticky-header

• Tùy chọn Boolean

• Detail:

  Thuộc tính: data-sticky-header

• Loại: Boolean

  th {
    background: white;
    position: sticky;
    top: 0;
  }
  

  0

• Đặt đúng để sử dụng tiêu đề dính.

  th {
    background: white;
    position: sticky;
    top: 0;
  }
  

  1

• Loại:

  th {
    background: white;
    position: sticky;
    top: 0;
  }
  

  2

  th {
    background: white;
    position: sticky;
    top: 0;
  }
  

  2

• Detail:

  Mặc định:

  th {
    background: white;
    position: sticky;
    top: 0;
  }
  

  0

• Mặc định:

  th {
    background: white;
    position: sticky;
    top: 0;
  }
  

  5

  th {
    background: white;
    position: sticky;
    top: 0;
  }
  

  5

• Thuộc tính:

  th {
    background: white;
    position: sticky;
    top: 0;
  }
  

  6

  th {
    background: white;
    position: sticky;
    top: 0;
  }
  

  6

• Loại:

  th {
    background: white;
    position: sticky;
    top: 0;
  }
  

  2

  th {
    background: white;
    position: sticky;
    top: 0;
  }
  

  2

• Detail:

  Đặt phần bù bên phải của thùng chứa tiêu đề dính. Nếu phần đệm cơ thể đúng là

  th {
    background: white;
    position: sticky;
    top: 0;
  }
  

  3, giá trị này sẽ là

  th {
    background: white;
    position: sticky;
    top: 0;
  }
  

  4.

• Mặc định:

  th {
    background: white;
    position: sticky;
    top: 0;
  }
  

  5

  th {
    background: white;
    position: sticky;
    top: 0;
  }
  

  5

• Thuộc tính:

  .table-sticky th {
    background: #fff;
    position: sticky;
    top: -1px;
    z-index: 990;
  }
  

  1

  .table-sticky th {
    background: #fff;
    position: sticky;
    top: -1px;
    z-index: 990;
  }
  

  1

• Loại:

  th {
    background: white;
    position: sticky;
    top: 0;
  }
  

  2

  th {
    background: white;
    position: sticky;
    top: 0;
  }
  

  2

• Detail:

  Đặt phần bù bên phải của thùng chứa tiêu đề dính. Nếu phần đệm cơ thể đúng là

  th {
    background: white;
    position: sticky;
    top: 0;
  }
  

  3, giá trị này sẽ là

  th {
    background: white;
    position: sticky;
    top: 0;
  }
  

  4.

• Mặc định:

  th {
    background: white;
    position: sticky;
    top: 0;
  }
  

  5

  th {
    background: white;
    position: sticky;
    top: 0;
  }
  

  5

Tôi đang cố gắng tạo ra một tiêu đề bàn dính. Sử dụng mã CSS này, nó hoạt động hoàn hảo trên một bảng tiêu chuẩn (nó sẽ vẫn dính vào cuối bảng.

th {
  background: white;
  position: sticky;
  top: 0;
}

Tuy nhiên, tôi cần bảng để đáp ứng với các thiết bị di động (khả năng cuộn đúng). Thật không may, nó không còn hoạt động khi tôi thêm lớp phản ứng bảng bootstrap (vui lòng xem https://jsfiddle.net/b8x16eht/ của tôi)

Làm thế nào tôi có thể làm cho nó hoạt động trên cả điện thoại di động và máy tính để bàn (không đặt độ cao cố định)

Chỉnh sửa: Cảm ơn @ufgufugullu vì đã chỉ ra một giải pháp khả thi khác là một cải tiến. Nó hoạt động tốt cho máy tính để bàn tuy nhiên nó vẫn không hoạt động ở chế độ phản hồi (khi xem từ cửa sổ nhỏ hơn). Cập nhật Fiddle TẠI ĐÂY: https://jsfiddle.net/aqfjozrm/

.table-sticky th {
  background: #fff;
  position: sticky;
  top: -1px;
  z-index: 990;
}

Tôi đã tìm được một trang web đã nhận được nó để làm việc trên các bảng đáp ứng cũng như chiều rộng đầy đủ mặc dù nó không sử dụng bootstrap https://www.timeanddate.com/weather/new-zealand/auckland/hourly

Tôi bắt đầu nghĩ rằng chúng ta cần thêm một người nghe JavaScript để bù vị trí từ cơ thể sau đó cập nhật phong cách vị trí hàng đầu của Thead. Bất kỳ Gurus JS ở đây :)?

Xuất bản: 9.5.2019 | Cập nhật lần cuối: 10.6.2022

Với sự trợ giúp của một vài lớp CSS, bạn có thể dễ dàng tạo các tiêu đề cố định cho các bảng phản hồi của mình với Bootstrap 4 hoặc 5.fixed headers for your responsive tables with Bootstrap 4 or 5.

Trong hướng dẫn ngắn này, tôi sẽ chỉ cho bạn cách tạo các tiêu đề dính như vậy cho bàn của bạn. Bạn có thể cuộn nội dung bảng và tiêu đề sẽ vẫn ở vị trí của nó.sticky headers for your table. You can scroll the table contents and the header will remain in its place.

Bảng với tiêu đề dính của nó sẽ được đáp ứng và hiển thị độc đáo trên các khung nhìn nhỏ hơn. Mã này rất dễ thực hiện và tùy chỉnh để đáp ứng nhu cầu cụ thể của bạn.

Được rồi, hãy làm & nbsp; nó!

Hướng dẫn từng bước một

• Đừng quên quấn hàng tiêu đề bảng cố định của bạn trong một ____ ____ 6 & nbsp; trình bao bọc
• Chúng tôi giới hạn chiều cao

  .table-sticky th {
    background: #fff;
    position: sticky;
    top: -1px;
    z-index: 990;
  }
  

  7 ở

  .table-sticky th {
    background: #fff;
    position: sticky;
    top: -1px;
    z-index: 990;
  }
  

  8 (thêm giá trị của bạn) và đặt

  .table-sticky th {
    background: #fff;
    position: sticky;
    top: -1px;
    z-index: 990;
  }
  

  9 thành position0. Tất cả điều này được thực hiện trong CSS.
• Sau đó để làm cho mọi thứ hoạt động, chúng ta phải đặt các hàng và ô của bảng thành position1 và position2

Khi nào nên sử dụng một bảng có tiêu đề cố định trong thiết kế web?

Khi bạn cần hiển thị dữ liệu ở dạng bảng, sẽ tốt hơn nếu bạn có thể làm & nbsp; nó trong một bảng có tiêu đề cố định. Điều này là do nó làm cho nội dung dễ đọc và hiểu hơn.

Một bảng có tiêu đề cố định có thể được sử dụng để hiển thị dữ liệu thường được tìm thấy trong một tờ Excel hoặc cơ sở dữ liệu. Thông tin có thể dễ dàng được sắp xếp thành các cột và hàng. Nó cũng dễ dàng xác định nội dung chính của mỗi cột.

Nếu bạn thích đoạn trích này, bạn cũng có thể thích khám phá menu dọc bootstrap hoặc thả xuống đa loại bootstrap.

Xin lưu ý rằng Trình chỉnh sửa tương tác trên trang này nên được xem trên máy tính xách tay hoặc máy tính để bàn của bạn để có kết quả tốt nhất.

Xem chủ đề bootstrap miễn phí của tôi chỉnh sửa đoạn này

Cách sử dụng đoạn trích

Có hai cách để sử dụng đoạn trích:

• A] Sao chép nó vào dự án của bạn. Điều này có nghĩa là:
  1. Sao chép nội dung của các tab HTML, CSS, JavaScript vào dự án của bạn
  2. Hãy chắc chắn rằng bạn có CSS và JS của JQuery 3 và Bootstrap 4 cũng có trong dự án của bạn.
  3. Điều đó nên là nó, và bạn nên tốt để đi.
• b] Sử dụng liên kết "Chỉnh sửa trong JSFiddle" ở phía trên bên phải và chơi với nó trong JSFiddle.Sau khi điều chỉnh những gì bạn cần, bạn có thể sử dụng các bước giống như trong A] để phát triển nó tại địa phương.