Nói chung, một bảng mô tả mối quan hệ giữa một hàng với một tập hợp các cột. Đó là một cách tuyệt vời để tổ chức và minh họa dữ liệu.
Bootstrap là một khung công tác CSS có thể giúp chúng ta tạo nội dung siêu nhanh. Trong bài viết này, chúng tôi xem xét cách thiết lập Bootstrap, tìm hiểu lý do tại sao chúng tôi có thể cần một bảng và xem một số ví dụ về bảng đang hoạt động bằng cách sử dụng khung Bootstrap.
Bắt đầu
Để đảm bảo chúng ta có thể xem một phương thức trên trang web của mình, hãy đảm bảo rằng chúng ta có các phần phụ thuộc thích hợp. Đối với phần trình diễn này, chúng tôi không cần Bootstrap, Popper.JS và jQuery, nhưng bạn nên thêm nó bằng cách nào đó vì bạn có thể sẽ làm việc với các thành phần khác cần nó. Điều hướng đến trang Bắt đầu nhanh của Bootstrap để được hỗ trợ lấy tất cả các phần phụ thuộc của bạn.
Cách liên kết các gói chúng tôi cần tùy thuộc vào bạn, nhưng cách dễ nhất, thân thiện với người mới bắt đầu là sử dụng mạng phân phối nội dung - CDN - cho jQuery, Popper.js và Bootstrap. Hãy cẩn thận với thứ tự <script> của bạn thẻ - vấn đề đặt hàng ở đây.
Khi nào thì sử dụng bảng
Sử dụng bảng khi bạn muốn tổng hợp nhiều dữ liệu cùng một lúc. Sử dụng bảng Bootstrap khi bạn muốn tạo các bảng đáp ứng một cách dễ dàng. Bootstrap sử dụng cấu trúc HTML cơ bản của một bảng. Tất cả những gì bạn phải làm là kết hợp CSS của họ và kiểu tùy chỉnh của bạn để kết hợp các bảng tùy chỉnh, đáp ứng cho trang web của bạn.
Sử dụng Bootstrap để tạo bảng
Các bảng theo truyền thống được xây dựng bằng HTML và CSS. Điều này sẽ nhận được cấu trúc cơ bản và kiểu dáng của bảng của chúng tôi trên màn hình. Chúng tôi sử dụng Bootstrap để thiết kế đáp ứng và sẵn sàng hoạt động nhanh chóng để chúng tôi có thể chuyển sang các mục có mức độ ưu tiên cao hơn trong danh sách các mục cần làm cho ứng dụng của mình.
Khi sử dụng Bootstrap, hãy có sẵn tài liệu để bạn có thể cấu trúc bảng đúng cách. Điều khác biệt về bảng so với phương thức hoặc thanh điều hướng là nó không nhất thiết phải dựa vào JavaScript để hoạt động, vì vậy nó được coi là một tính năng nội dung hơn là một thành phần thực tế. Bạn sẽ tìm thấy thông tin về cách tạo bảng trong menu Nội dung trong thanh bên trái ngược với menu Thành phần.
Hãy bắt đầu với cấu trúc cơ bản:
81% người tham gia cho biết họ cảm thấy tự tin hơn về triển vọng công việc công nghệ của mình sau khi tham gia một cuộc thi đào tạo. Kết hợp với bootcamp ngay hôm nay.
Sinh viên tốt nghiệp bootcamp trung bình dành ít hơn sáu tháng để chuyển đổi nghề nghiệp, từ khi bắt đầu bootcamp đến khi tìm được công việc đầu tiên của họ.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Table Demo</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<table>
<thead>
<tr>
<th>Bootstrap Table Demo</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="col">No. </th>
<th scope="col">Drink</th>
<th scope="col">Price</th>
</tr>
<tr>
<td scope="row">#1</td>
<td>Iced Tea</td>
<td>$3.25</td>
</tr>
<tr>
<td scope="row">#2</td>
<td>Fountain Soda</td>
<td>$3.00</td>
</tr>
<tr>
<td scope="row">#3</td>
<td>Coffee</td>
<td>$2.00</td>
</tr>
<tr>
<td scope="row">#4</td>
<td>Latte</td>
<td>$4.25</td>
</tr>
</tbody>
</table>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
<script src="script.js">
</script>
</body>
</html>
Nếu bạn chạy đánh dấu ở trên, bạn sẽ thấy một bảng rất cơ bản có tiêu đề và một số hàng mô tả đồ uống, giá cả và số hàng của chúng. Không có kiểu dáng nào ngoại trừ những gì đã được bootstrap thiết lập cho toàn bộ tài liệu.
Để thêm kiểu vào bảng, tất cả những gì bạn cần làm là thêm .table lớp cho <table> thẻ.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Table Demo</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<table class="table">
<thead>
<tr>
<th scope="colgroup"> Bootstrap Table Demo</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="col">No. </th>
<th scope="col">Drink</th>
<th scope="col">Price</th>
</tr>
<tr>
<td scope="row">#1</td>
<td>Iced Tea</td>
<td>$3.25</td>
</tr>
<tr>
<td scope="row">#2</td>
<td>Fountain Soda</td>
<td>$3.00</td>
</tr>
<tr>
<td scope="row">#3</td>
<td>Coffee</td>
<td>$2.00</td>
</tr>
<tr>
<td scope="row">#4</td>
<td>Latte</td>
<td>$4.25</td>
</tr>
</tbody>
</table>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
<script src="script.js">
</script>
</body>
</html>
Điều này bổ sung thêm kiểu dáng rất cơ bản và khả năng đáp ứng cho bảng. Hãy cùng xem để biết cách khác mà chúng tôi có thể tùy chỉnh kiểu cho phù hợp với nhu cầu của mình.
Đảo ngược màu sắc mặc định
Thêm .table-dark ngoài .table trong danh sách tên lớp của bạn trong <table> để thay đổi bảng màu cơ bản của bảng thành màu tối.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Table Demo</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<table class="table table-dark">
<thead>
<tr>
<th scope="colgroup"> Bootstrap Table Demo</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="col">No. </th>
<th scope="col">Drink</th>
<th scope="col">Price</th>
</tr>
<tr>
<td scope="row">#1</td>
<td>Iced Tea</td>
<td>$3.25</td>
</tr>
<tr>
<td scope="row">#2</td>
<td>Fountain Soda</td>
<td>$3.00</td>
</tr>
<tr>
<td scope="row">#3</td>
<td>Coffee</td>
<td>$2.00</td>
</tr>
<tr>
<td scope="row">#4</td>
<td>Latte</td>
<td>$4.25</td>
</tr>
</tbody>
</table>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
<script src="script.js">
</script>
</body>
</html> Bạn cũng có thể sử dụng các thuộc tính màu cơ bản của Bootstrap ngoài tối và sáng để kiểm soát lớp theo ngữ cảnh (tức là .table-primary, table-risk, table-success, v.v.)
Tùy chọn kiểu
Nếu bạn muốn kiểm soát sơ đồ màu của phần đầu bảng tách biệt với phần nội dung, bạn có thể thực hiện điều đó bằng cách thêm .thead-dark hoặc .thead-light tới <thead> thuộc tính lớp.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Table Demo</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<table class="table table-danger">
<thead class="thead-light">
<th>Bootstrap Table Demo</th>
<th />
<th />
</thead>
<tbody>
<tr>
<th scope="col">No. </th>
<th scope="col">Drink</th>
<th scope="col">Price</th>
</tr>
<tr>
<td scope="row">#1</td>
<td>Iced Tea</td>
<td>$3.25</td>
</tr>
<tr>
<td scope="row">#2</td>
<td>Fountain Soda</td>
<td>$3.00</td>
</tr>
<tr>
<td scope="row">#3</td>
<td>Coffee</td>
<td>$2.00</td>
</tr>
<tr>
<td scope="row">#4</td>
<td>Latte</td>
<td>$4.25</td>
</tr>
</tbody>
</table>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
<script src="script.js">
</script>
</body>
</html> Sọc
Thêm .table-striped <table> để điều chỉnh màu của mọi hàng khác trong bảng.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Table Demo</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<table class="table table-striped table-warning">
<thead class="thead-light">
<th>Bootstrap Table Demo With Stripes</th>
<th />
<th />
</thead>
<tbody>
<tr>
<th scope="col">No. </th>
<th scope="col">Drink</th>
<th scope="col">Price</th>
</tr>
<tr>
<td scope="row">#1</td>
<td>Iced Tea</td>
<td>$3.25</td>
</tr>
<tr>
<td scope="row">#2</td>
<td>Fountain Soda</td>
<td>$3.00</td>
</tr>
<tr>
<td scope="row">#3</td>
<td>Coffee</td>
<td>$2.00</td>
</tr>
<tr>
<td scope="row">#4</td>
<td>Latte</td>
<td>$4.25</td>
</tr>
</tbody>
</table>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
<script src="script.js">
</script>
</body>
</html> Đường viền
Sử dụng .table-bordered để thêm đường viền cho tất cả các cạnh của mỗi ô - sử dụng .table-borderless để xóa tất cả các đường viền từ tất cả các cạnh của mỗi ô.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Table Demo</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<table class="table table-primary table-bordered">
<thead class="thead-light">
<th>Bootstrap Table Demo With Borders</th>
<th />
<th />
</thead>
<tbody>
<tr>
<th scope="col">No. </th>
<th scope="col">Drink</th>
<th scope="col">Price</th>
</tr>
<tr>
<td scope="row">#1</td>
<td>Iced Tea</td>
<td>$3.25</td>
</tr>
<tr>
<td scope="row">#2</td>
<td>Fountain Soda</td>
<td>$3.00</td>
</tr>
<tr>
<td scope="row">#3</td>
<td>Coffee</td>
<td>$2.00</td>
</tr>
<tr>
<td scope="row">#4</td>
<td>Latte</td>
<td>$4.25</td>
</tr>
</tbody>
</table>
<table class="table table-primary table-borderless">
<thead class="thead-light">
<th>Bootstrap Table Demo Without Borders</th>
<th />
<th />
</thead>
<tbody>
<tr>
<th scope="col">No. </th>
<th scope="col">Drink</th>
<th scope="col">Price</th>
</tr>
<tr>
<td scope="row">#1</td>
<td>Iced Tea</td>
<td>$3.25</td>
</tr>
<tr>
<td scope="row">#2</td>
<td>Fountain Soda</td>
<td>$3.00</td>
</tr>
<tr>
<td scope="row">#3</td>
<td>Coffee</td>
<td>$2.00</td>
</tr>
<tr>
<td scope="row">#4</td>
<td>Latte</td>
<td>$4.25</td>
</tr>
</tbody>
</table>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
<script src="script.js">
</script>
</body>
</html> Di chuột
.table-hover được thêm vào thuộc tính lớp của <table> sẽ cho phép tất cả các hàng trong <tbody> để trở nên có thể lưu trữ.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Table Demo</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<table class="table table-hover table-primary table-bordered">
<thead class="thead-light">
<th>Bootstrap Table Demo With Hover</th>
<th />
<th />
</thead>
<tbody>
<tr>
<th scope="col">No. </th>
<th scope="col">Drink</th>
<th scope="col">Price</th>
</tr>
<tr>
<td scope="row">#1</td>
<td>Iced Tea</td>
<td>$3.25</td>
</tr>
<tr>
<td scope="row">#2</td>
<td>Fountain Soda</td>
<td>$3.00</td>
</tr>
<tr>
<td scope="row">#3</td>
<td>Coffee</td>
<td>$2.00</td>
</tr>
<tr>
<td scope="row">#4</td>
<td>Latte</td>
<td>$4.25</td>
</tr>
</tbody>
</table>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
<script src="script.js">
</script></body>
</html> Bảng đáp ứng
Đóng gói <table> của bạn với một <div> với tên lớp .table-responsive để làm cho bảng của bạn đáp ứng trên tất cả các điểm ngắt. Về cơ bản, điều này làm cho bảng của bạn có thể cuộn theo chiều ngang nếu nội dung được cắt bớt theo kích thước của bảng.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Table Demo</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<table class="table table-hover table-primary table-bordered">
<thead class="thead-light">
<th>Bootstrap Table Demo With Hover</th>
<th />
<th />
</thead>
<tbody>
<tr>
<th scope="col">No. </th>
<th scope="col">Drink</th>
<th scope="col">Price</th>
</tr>
<tr>
<td scope="row">#1</td>
<td>Iced Tea</td>
<td>$3.25</td>
</tr>
<tr>
<td scope="row">#2</td>
<td>Fountain Soda</td>
<td>$3.00</td>
</tr>
<tr>
<td scope="row">#3</td>
<td>Coffee</td>
<td>$2.00</td>
</tr>
<tr>
<td scope="row">#4</td>
<td>Latte</td>
<td>$4.25</td>
</tr>
</tbody>
</table>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
<script src="script.js">
</script></body>
</html> Kết luận
Có nhiều cách để tùy chỉnh bảng bằng cách sử dụng Bootstrap kết hợp với HTML của bạn. Sau khi bạn đã sử dụng thành thạo các cách này để tạo kiểu cho bảng Bootstrap của mình, hãy thử sử dụng các kiểu có thể tùy chỉnh của riêng bạn!
.thead-dark hoặc .thead-light tới <thead> thuộc tính lớp. .table-striped <table> để điều chỉnh màu của mọi hàng khác trong bảng. <table> sẽ cho phép tất cả các hàng trong <tbody> để trở nên có thể lưu trữ. <table> của bạn với một <div> với tên lớp .table-responsive để làm cho bảng của bạn đáp ứng trên tất cả các điểm ngắt. Về cơ bản, điều này làm cho bảng của bạn có thể cuộn theo chiều ngang nếu nội dung được cắt bớt theo kích thước của bảng.