sheet
- 1. Basic table (.table)
- 2. Striped table (.table-striped)
- 3. Table with border (.table-bordered)
- 4. Mouse hover state table (.table-hover)
- 5. Table with background color (.table-color)
- 6. Striped table with background color (.table-color.table-striped)
- 7. Mouse hover effect table with background color (.table-color.table-hover)
- 8. Color classes that specify meaning
- 9. Header color (.thead-dark / .thead-light)
- 10. Smaller tables ( .table-sm )
- 11. Responsive table (.table-responsive)
1. Basic table (.table)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<script src="js/jquery.slim.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/popper.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="container">
<table class="table">
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>职位</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>男</td>
<td>22</td>
<td>Java工程师</td>
</tr>
<tr>
<td>李四</td>
<td>男</td>
<td>25</td>
<td>数据工程师</td>
</tr>
<tr>
<td>赵一</td>
<td>女</td>
<td>21</td>
<td>前端开发</td>
</tr>
<tr>
<td>王五</td>
<td>男</td>
<td>30</td>
<td>测试工程师</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
operation result:
2. Striped table (.table-striped)
code show as below:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<script src="js/jquery.slim.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/popper.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="container">
<table class="table table-striped">
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>职位</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>男</td>
<td>22</td>
<td>Java工程师</td>
</tr>
<tr>
<td>李四</td>
<td>男</td>
<td>25</td>
<td>数据工程师</td>
</tr>
<tr>
<td>赵一</td>
<td>女</td>
<td>21</td>
<td>前端开发</td>
</tr>
<tr>
<td>王五</td>
<td>男</td>
<td>30</td>
<td>测试工程师</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Running result:
Note: The stripes only appear on the lines within <tbody>, not in the header.
3. Table with border (.table-bordered)
code show as below:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<script src="js/jquery.slim.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/popper.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="container">
<table class="table table-bordered">
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>职位</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>男</td>
<td>22</td>
<td>Java工程师</td>
</tr>
<tr>
<td>李四</td>
<td>男</td>
<td>25</td>
<td>数据工程师</td>
</tr>
<tr>
<td>赵一</td>
<td>女</td>
<td>21</td>
<td>前端开发</td>
</tr>
<tr>
<td>王五</td>
<td>男</td>
<td>30</td>
<td>测试工程师</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
operation result:
4. Mouse hover state table (.table-hover)
code show as below:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<script src="js/jquery.slim.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/popper.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="container">
<table class="table table-hover">
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>职位</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>男</td>
<td>22</td>
<td>Java工程师</td>
</tr>
<tr>
<td>李四</td>
<td>男</td>
<td>25</td>
<td>数据工程师</td>
</tr>
<tr>
<td>赵一</td>
<td>女</td>
<td>21</td>
<td>前端开发</td>
</tr>
<tr>
<td>王五</td>
<td>男</td>
<td>30</td>
<td>测试工程师</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Running result:
Note: Whichever row the mouse hovers over, the background color of that row will become gray (except the table header).
5. Table with background color (.table-color)
code show as below:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<script src="js/jquery.slim.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/popper.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="container">
<table class="table table-info">
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>职位</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>男</td>
<td>22</td>
<td>Java工程师</td>
</tr>
<tr>
<td>李四</td>
<td>男</td>
<td>25</td>
<td>数据工程师</td>
</tr>
<tr>
<td>赵一</td>
<td>女</td>
<td>21</td>
<td>前端开发</td>
</tr>
<tr>
<td>王五</td>
<td>男</td>
<td>30</td>
<td>测试工程师</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
operation result:
6. Striped table with background color (.table-color.table-striped)
code show as below:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<script src="js/jquery.slim.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/popper.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="container">
<table class="table table-dark table-striped">
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>职位</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>男</td>
<td>22</td>
<td>Java工程师</td>
</tr>
<tr>
<td>李四</td>
<td>男</td>
<td>25</td>
<td>数据工程师</td>
</tr>
<tr>
<td>赵一</td>
<td>女</td>
<td>21</td>
<td>前端开发</td>
</tr>
<tr>
<td>王五</td>
<td>男</td>
<td>30</td>
<td>测试工程师</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
operation result:
7. Mouse hover effect table with background color (.table-color.table-hover)
code show as below:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<script src="js/jquery.slim.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/popper.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="container">
<table class="table table-dark table-hover">
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>职位</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>男</td>
<td>22</td>
<td>Java工程师</td>
</tr>
<tr>
<td>李四</td>
<td>男</td>
<td>25</td>
<td>数据工程师</td>
</tr>
<tr>
<td>赵一</td>
<td>女</td>
<td>21</td>
<td>前端开发</td>
</tr>
<tr>
<td>王五</td>
<td>男</td>
<td>30</td>
<td>测试工程师</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
operation result:
8. Color classes that specify meaning
Colors can be set for table rows or cells by specifying meaningful color classes :
The code is as follows: Part of the color example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<script src="js/jquery.slim.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/popper.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="container">
<table class="table">
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>职位</th>
</tr>
</thead>
<tbody>
<tr class="table-primary">
<td>张三</td>
<td>男</td>
<td>22</td>
<td>Java工程师</td>
</tr>
<tr class="table-success">
<td>李四</td>
<td>男</td>
<td>25</td>
<td>数据工程师</td>
</tr>
<tr class="table-danger">
<td>赵一</td>
<td>女</td>
<td>21</td>
<td>前端开发</td>
</tr>
<tr class="table-info">
<td>王五</td>
<td>男</td>
<td>30</td>
<td>测试工程师</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
operation result:
9. Header color (.thead-dark / .thead-light)
The .thead-dark class is used to add a black background to the header , and the .thead-light class is used to add a gray background to the header.
The code is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<script src="js/jquery.slim.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/popper.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="container">
<table class="table">
<thead class="thead-dark">
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>职位</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>男</td>
<td>22</td>
<td>Java工程师</td>
</tr>
<tr>
<td>李四</td>
<td>男</td>
<td>25</td>
<td>数据工程师</td>
</tr>
<tr>
<td>赵一</td>
<td>女</td>
<td>21</td>
<td>前端开发</td>
</tr>
<tr>
<td>王五</td>
<td>男</td>
<td>30</td>
<td>测试工程师</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Running result:
the code is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<script src="js/jquery.slim.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/popper.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="container">
<table class="table">
<thead class="thead-light">
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>职位</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>男</td>
<td>22</td>
<td>Java工程师</td>
</tr>
<tr>
<td>李四</td>
<td>男</td>
<td>25</td>
<td>数据工程师</td>
</tr>
<tr>
<td>赵一</td>
<td>女</td>
<td>21</td>
<td>前端开发</td>
</tr>
<tr>
<td>王五</td>
<td>男</td>
<td>30</td>
<td>测试工程师</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
operation result:
10. Smaller tables ( .table-sm )
Set up a smaller table by reducing the padding:
code show as below:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<script src="js/jquery.slim.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/popper.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="container">
<table class="table table-bordered table-sm">
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>职位</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>男</td>
<td>22</td>
<td>Java工程师</td>
</tr>
<tr>
<td>李四</td>
<td>男</td>
<td>25</td>
<td>数据工程师</td>
</tr>
<tr>
<td>赵一</td>
<td>女</td>
<td>21</td>
<td>前端开发</td>
</tr>
<tr>
<td>王五</td>
<td>男</td>
<td>30</td>
<td>测试工程师</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Running result:
the original form is as follows:
11. Responsive table (.table-responsive)
You can set the scroll bar to be displayed at the specified screen width through the following class:
The code is as follows: The .table-responsive class is used to create a responsive table. When the screen width is less than 992px, a horizontal scroll bar will be created. If the width of the visible area is greater than 992px, there will be no scroll bar
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<script src="js/jquery.slim.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/popper.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="container">
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>学号</th><th>姓名</th><th>性别</th><th>年龄</th><th>偶像</th>
<th>籍贯</th><th>爱好</th><th>职位</th><th>血型</th><th>星座</th>
<th>1</th><th>1</th><th>1</th><th>1</th><th>1</th><th>1</th><th>1</th><th>1</th>
<th>1</th><th>1</th><th>1</th><th>1</th><th>1</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td><td>钟离</td><td>男</td><td>21</td><td>zzn</td>
<td>山东</td><td>看书</td><td>前端工程师</td><td>A</td><td>双子座</td>
<th>1</th><th>1</th><th>1</th><th>1</th><th>1</th><th>1</th><th>1</th><th>1</th>
<th>1</th><th>1</th><th>1</th><th>1</th><th>1</th>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>
operation result:
