Bootstrap 简明教程
Bootstrap - Tables
此章节将会讨论 Bootstrap 表格和创建表格的类。表格用于以行和列的形式组织数据。表格允许你对海量数据进行分组，并以清晰有序的方式呈现它们。下面列出了一些受 Bootstraps 支持的表格项目。
Sr.No. |
Tag & Description |
1 |
<table> 用于以表格格式显示数据的包装元素 |
2 |
<thead> 表头行（<tr>）的容器元素，用于标记表格列。 |
3 |
<tbody> 表格主体中表行（<tr>）的容器元素。 |
4 |
<tr> 出现在单行中的一组表单元格（<td>或<th>）的容器元素。 |
5 |
<td> Default table cell. |
6 |
<th> 专用于列（或行，具体取决于范围和放置）标签的特殊表单元格。必须在 <thead> 中使用 |
7 |
<caption> Defines a table caption |
Simple table
如果您想要基本表样式，只带有少量轻微留白和水平分隔线，请在表中添加 *.table *类，如下面的示例所示。
Example
您可以使用*编辑和运行*选项编辑并尝试运行此代码。
<DOCTYPE html >
<html lang="en">
<head >
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" >
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js" ></script>
<title >Bootstrap - Table</title >
</head >
<body >
<table class="table" >
<thead >
<tr >
<th scope="col" >Sr.No.</th >
<th scope="col" >Name</th >
<th scope="col" >Role</th >
<th scope="col" >Salary</th >
</tr >
</thead >
<tbody >
<tr >
<th scope="row" >1</th >
<td >Jhon</td >
<td >Software Developer</td >
<td >40000</td >
</tr >
<tr >
<th scope="row" >2</th >
<td >David</td >
<td >Tester</td >
<td >50000</td >
</tr >
<tr >
<th scope="row" >3</th >
<td >Mary</td >
<td >Data Analyst</td >
<td >35000</td >
</tr >
</tbody >
</table >
</body >
</html >Variants
上下文类允许您更改表格行或单个单元格的背景颜色。添加类 .table-active , .table-success , .table-danger , .table-warning 类以突出显示表格行或单元格，如以下示例所示。
Example
您可以使用 *编辑和运行 *选项编辑和尝试运行此代码。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - Table</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<table class="table">
<thead>
<tr>
<th scope="col">Sr.No.</th>
<th scope="col">Name</th>
<th scope="col">Role</th>
<th scope="col">Salary</th>
</tr>
</thead>
<tbody>
<tr class="table-default">
<th scope="row">1</th>
<td>Oliver</td>
<td>Full satck developer</td>
<td>40000</td>
</tr>
<tr class="table-primary">
<th scope="row">2</th>
<td>Jhon</td>
<td>Software Developer</td>
<td>43000</td>
</tr>
<tr class="table-secondary">
<th scope="row">3</th>
<td>David</td>
<td>Tester</td>
<td>60000</td>
</tr>
<tr class="table-info">
<th scope="row">4</th>
<td>Sam</td>
<td>Software Developer</td>
<td>35000</td>
</tr>
<tr class="table-danger">
<th scope="row">5</th>
<td>Mary</td>
<td>Data Analyst</td>
<td>36000</td>
</tr>
<tr class="table-success">
<th scope="row">6</th>
<td>James</td>
<td>Tester</td>
<td>47000</td>
</tr>
<tr class="table-active">
<th scope="row">7</th>
<td>Mary</td>
<td>HR</td>
<td>90000</td>
</tr>
<tr class="table-light">
<th scope="row">8</th>
<td>Noah</td>
<td>Data Analyst</td>
<td>50000</td>
</tr>
<tr class="table-warning">
<th scope="row">9</th>
<td>Lucas</td>
<td>Software Developer</td>
<td>52000</td>
</tr>
<tr class="table-dark">
<th scope="row">10</th>
<td>Almand</td>
<td>Software Developer</td>
<td>73000</td>
</tr>
</tbody>
</table>
</body>
</html>Striped rows
要获得行的斑马条纹，请添加 .table-striped * class in the *.tbody ，如以下示例所示。
Example
您可以使用 *编辑和运行 *选项编辑和尝试运行此代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" >
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
<title>Bootstrap - Table</title>
</head>
<body>
<table class="table table-striped">
<thead>
<tr>
<th scope="col">Sr.No.</th>
<th scope="col">Name</th>
<th scope="col">Role</th>
<th scope="col">Salary</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Jhon</td>
<td>Software Developer</td>
<td>40000</td>
</tr>
<tr>
<th scope="row">2</th>
<td>David</td>
<td>Tester</td>
<td>50000</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Mary</td>
<td>Data Analyst</td>
<td>35000</td>
</tr>
</tbody>
</table>
</body>
</html>Striped columns
要获得列的斑马条纹，请在 .tbody 中添加 .table-striped-columns 类，如以下示例所示。
Example
您可以使用 *编辑和运行 *选项编辑和尝试运行此代码。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
<title>Bootstrap - Table</title>
</head>
<body>
<table class="table table-striped-columns">
<thead>
<tr>
<th scope="col">Sr.No.</th>
<th scope="col">Name</th>
<th scope="col">Role</th>
<th scope="col">Salary</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Jhon</td>
<td>Software Developer</td>
<td>40000</td>
</tr>
<tr>
<th scope="row">2</th>
<td>David</td>
<td>Tester</td>
<td>50000</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Mary</td>
<td>Data Analyst</td>
<td>35000</td>
</tr>
</tbody>
</table>
</body>
</html>添加 .table-dark 和 .table-striped 类以获得表格上深色斑马条纹。
Example
您可以使用 *编辑和运行 *选项编辑和尝试运行此代码。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
<title>Bootstrap - Table</title>
</head>
<body>
<table class="table table-dark table-striped">
<thead>
<tr>
<th scope="col">Sr.No.</th>
<th scope="col">Name</th>
<th scope="col">Role</th>
<th scope="col">Salary</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Jhon</td>
<td>Software Developer</td>
<td>40000</td>
</tr>
<tr>
<th scope="row">2</th>
<td>David</td>
<td>Tester</td>
<td>50000</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Mary</td>
<td>Data Analyst</td>
<td>35000</td>
</tr>
</tbody>
</table>
</body>
</html>添加 .table-dark 和 .table-striped-columns 类以获得深色斑马条纹列。
Example
您可以使用 *编辑和运行 *选项编辑和尝试运行此代码。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
<title>Bootstrap - Table</title>
</head>
<body>
<table class="table table-dark table-striped-columns">
<thead>
<tr>
<th scope="col">Sr.No.</th>
<th scope="col">Name</th>
<th scope="col">Role</th>
<th scope="col">Salary</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Jhon</td>
<td>Software Developer</td>
<td>40000</td>
</tr>
<tr>
<th scope="row">2</th>
<td>David</td>
<td>Tester</td>
<td>50000</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Mary</td>
<td>Data Analyst</td>
<td>35000</td>
</tr>
</tbody>
</table>
</body>
</html>添加 .table-success 和 .table-striped 类以获得表格上浅绿色斑马条纹。
Example
您可以使用 *编辑和运行 *选项编辑和尝试运行此代码。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
<title>Bootstrap - Table</title>
</head>
<body>
<table class="table table-success table-striped">
<thead>
<tr>
<th scope="col">Sr.No.</th>
<th scope="col">Name</th>
<th scope="col">Role</th>
<th scope="col">Salary</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Jhon</td>
<td>Software Developer</td>
<td>40000</td>
</tr>
<tr>
<th scope="row">2</th>
<td>David</td>
<td>Tester</td>
<td>50000</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Mary</td>
<td>Data Analyst</td>
<td>35000</td>
</tr>
</tbody>
</table>
</body>
</html>添加 .table-success 和 .table-striped-columns 类以获得表格上浅绿色斑马条纹列。
Example
您可以使用 *编辑和运行 *选项编辑和尝试运行此代码。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
<title>Bootstrap - Table</title>
</head>
<body>
<table class="table table-success table-striped-columns">
<thead>
<tr>
<th scope="col">Sr.No.</th>
<th scope="col">Name</th>
<th scope="col">Role</th>
<th scope="col">Salary</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Jhon</td>
<td>Software Developer</td>
<td>40000</td>
</tr>
<tr>
<th scope="row">2</th>
<td>David</td>
<td>Tester</td>
<td>50000</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Mary</td>
<td>Data Analyst</td>
<td>35000</td>
</tr>
</tbody>
</table>
</body>
</html>Hoverable rows
添加 .table-hover 类以获得表格行上的悬停效果，如以下示例所示。
Example
您可以使用 *编辑和运行 *选项编辑和尝试运行此代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js" ></script>
<title>Bootstrap - Table</title>
</head>
<body>
<table class="table table-hover table-secondary">
<thead>
<tr>
<th scope="col">Sr.No.</th>
<th scope="col">Name</th>
<th scope="col">Role</th>
<th scope="col">Salary</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Jhon</td>
<td>Software Developer</td>
<td>40000</td>
</tr>
<tr>
<th scope="row">2</th>
<td>David</td>
<td>Tester</td>
<td>50000</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Mary</td>
<td>Data Analyst</td>
<td>35000</td>
</tr>
</tbody>
</table>
</body>
</html>添加 .table-hover 和 .table-dark 类以获得表格行上的深色悬停效果。
Example
您可以使用 *编辑和运行 *选项编辑和尝试运行此代码。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
<title>Bootstrap - Table</title>
</head>
<body>
<table class="table table-dark table-hover">
<thead>
<tr>
<th scope="col">Sr.No.</th>
<th scope="col">Name</th>
<th scope="col">Role</th>
<th scope="col">Salary</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Jhon</td>
<td>Software Developer</td>
<td>40000</td>
</tr>
<tr>
<th scope="row">2</th>
<td>David</td>
<td>Tester</td>
<td>50000</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Mary</td>
<td>Data Analyst</td>
<td>35000</td>
</tr>
</tbody>
</table>
</body>
</html>添加 .table-hover 和 .table-striped 类以获得表格上的悬停效果和斑马条纹。
Example
您可以使用 *编辑和运行 *选项编辑和尝试运行此代码。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
<title>Bootstrap - Table</title>
</head>
<body>
<table class="table table-hover table-striped">
<thead>
<tr>
<th scope="col">Sr.No.</th>
<th scope="col">Name</th>
<th scope="col">Role</th>
<th scope="col">Salary</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Jhon</td>
<td>Software Developer</td>
<td>40000</td>
</tr>
<tr>
<th scope="row">2</th>
<td>David</td>
<td>Tester</td>
<td>50000</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Mary</td>
<td>Data Analyst</td>
<td>35000</td>
</tr>
</tbody>
</table>
</body>
</html>Active table
添加 .table-active 类以突出显示表格的行或单元格。
Example
您可以使用 *编辑和运行 *选项编辑和尝试运行此代码。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
<title>Bootstrap - Table</title>
</head>
<body>
<table class="table">
<thead>
<tr>
<th scope="col">Sr.No.</th>
<th scope="col">Name</th>
<th scope="col">Role</th>
<th scope="col">Salary</th>
</tr>
</thead>
<tbody>
<tr class="table-active">
<th scope="row">1</th>
<td>Jhon</td>
<td>Software Developer</td>
<td>40000</td>
</tr>
<tr>
<th scope="row">2</th>
<td>David</td>
<td>Tester</td>
<td>50000</td>
</tr>
<tr class="table-active">
<th scope="row">3</th>
<td >mery</td>
<td>Data Analyst</td>
<td>35000</td>
</tr>
</tbody>
</table>
</body>
</html>Bordered table
要为每个项目添加边界并为整个表格添加圆角，请添加 .table-bordered * class in the *.tbody ，如以下示例所示。
Example
您可以使用 *编辑和运行 *选项编辑和尝试运行此代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" >
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js" ></script>
<title>Bootstrap - Table</title>
</head>
<body>
<table class="table table-bordered border-primary">
<thead>
<tr>
<th scope="col">Sr.No.</th>
<th scope="col">Name</th>
<th scope="col">Role</th>
<th scope="col">Salary</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Jhon</td>
<td>Software Developer</td>
<td>40000</td>
</tr>
<tr>
<th scope="row">2</th>
<td>David</td>
<td>Tester</td>
<td>50000</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Mary</td>
<td>Data Analyst</td>
<td>35000</td>
</tr>
</tbody>
</table>
</body>
</html>Tables without borders
若要使表格无边框，则添加 .table-borderless * class in the *.tbody ，如下面的示例所示。
Example
您可以使用 *编辑和运行 *选项编辑和尝试运行此代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" >
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
<title>Bootstrap - Table</title>
</head>
<body>
<table class="table table-borderless">
<thead>
<tr>
<th scope="col">Sr.No.</th>
<th scope="col">Name</th>
<th scope="col">Role</th>
<th scope="col">Salary</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Jhon</td>
<td>Software Developer</td>
<td>40000</td>
</tr>
<tr>
<th scope="row">2</th>
<td>David</td>
<td>Tester</td>
<td>50000</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Mary</td>
<td>Data Analyst</td>
<td>35000</td>
</tr>
</tbody>
</table>
</body>
</html>Small tables
若要通过将所有单元格填充量减半来使表格更紧凑，则向任意 .table 添加 *.table-sm * 类型，如下面的示例所示。
Example
您可以使用 *编辑和运行 *选项编辑和尝试运行此代码。
<DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js" ></script>
<title>Bootstrap - Table</title>
</head>
<body>
<table class="table table-sm">
<thead>
<tr>
<th scope="col">Sr.No.</th>
<th scope="col">Name</th>
<th scope="col">Role</th>
<th scope="col">Salary</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Jhon</td>
<td>Software Developer</td>
<td>40000</td>
</tr>
<tr>
<th scope="row">2</th>
<td>David</td>
<td>Tester</td>
<td>50000</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Mary</td>
<td>Data Analyst</td>
<td>35000</td>
</tr>
</tbody>
</table>
</body>
</html>Table group dividers
若要使表格组 .thead, .tbody *and .tfoot* 之间的表格边框更粗更深，则添加 *.table-sm * 类型，如下面的示例所示。
Example
您可以使用 *编辑和运行 *选项编辑和尝试运行此代码。
<DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" >
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js" ></script>
<title>Bootstrap - Table</title>
</head>
<body>
<table class="table">
<thead>
<tr>
<th scope="col">Sr.No.</th>
<th scope="col">Name</th>
<th scope="col">Role</th>
<th scope="col">Salary</th>
</tr>
</thead>
<tbody class="table-group-divider">
<tr>
<th scope="row">1</th>
<td>Jhon</td>
<td>Software Developer</td>
<td>40000</td>
</tr>
<tr>
<th scope="row">2</th>
<td>David</td>
<td>Tester</td>
<td>50000</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Mary</td>
<td>Data Analyst</td>
<td>35000</td>
</tr>
</tbody>
</table>
</body>
</html>Vertical alignment
<thead> 表格的单元格始终垂直对齐至底部。<tbody> 表格中的单元格从 <table> 继承其对齐方式且默认情况下垂直对齐至顶部。按需使用垂直对齐类型重新对齐。
Example
您可以使用 *编辑和运行 *选项编辑和尝试运行此代码。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
<title>Bootstrap - Tables</title>
</head>
<body>
<div class="table-responsive">
<table class="table align-middle">
<thead>
<tr>
<th scope="col">Sr.No.</th>
<th scope="col">Name</th>
<th scope="col">Role</th>
<th scope="col">Salary</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Jhon</td>
<td>Software Developer</td>
<td>40000</td>
</tr>
<tr class="align-bottom">
<th scope="row">2</th>
<td>David</td>
<td>Tester</td>
<td>50000</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Mery</td>
<td class="align-top">Data Analyst</td>
<td>35000</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>Responsive table
响应式表格启用表格的水平滚动。将 .table 包含 .table-responsive 的包装类可在不同视图端口上使用响应式表格。使用 .table-responsive{-sm|-md|-lg|-xl|-xxl} 向响应式表格添加最大断点。下表说明了屏幕尺寸和各个 Bootstrap 表格类型：
Class |
Screen width |
.table-responsive-sm |
< 576px |
.table-responsive-md |
< 768px |
.table-responsive-lg |
< 992px |
.table-responsive-xl |
< 1200px |
.table-responsive-xxl |
< 1400px |
Example
您可以使用 *编辑和运行 *选项编辑和尝试运行此代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" >
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
<title>Bootstrap - Table</title>
</head>
<body>
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr>
<th scope="col">Sr.No.</th>
<th scope="col">Name</th>
<th scope="col">Role</th>
<th scope="col">Age</th>
<th scope="col">Blood Group</th>
<th scope="col">gender</th>
<th scope="col">Address</th>
<th scope="col">Married</th>
<th scope="col">Education</th>
<th scope="col">AdharCard Number</th>
<th scope="col">Pan Number</th>
<th scope="col">City</th>
<th scope="col">Country</th>
<th scope="col">Salary</th>
<th scope="col">status</th>
<th scope="col">status</th>
<th scope="col">status</th>
<th scope="col">status</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td>Jhon</td>
<td>Software Developer</td>
<td>32</td>
<td>A+</td>
<td>Male</td>
<td>Pune,Maharashtra.</td>
<td>Yes</td>
<td>B.E(Computer Science)</td>
<td>0101010101010101</td>
<td>2020200202020202</td>
<td>Pune</td>
<td>India</td>
<td>40000</td>
<td>yes</td>
<td>yes</td>
<td>yes</td>
<td>yes</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>Nesting
表格嵌套用于在表格内创建表格，如下面的示例所示。
Example
您可以使用 *编辑和运行 *选项编辑和尝试运行此代码。
<DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" >
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
<title>Bootstrap - Table</title>
</head>
<body>
<table class="table">
<thead class="table">
<tr>
<th scope="col">Sr.No.</th>
<th scope="col">Name</th>
<th scope="col">Role</th>
<th scope="col">Salary</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Jhon</td>
<td>Software Developer</td>
<td>40000</td>
</tr>
<tr>
<td colspan="4">
<table class="table mb-0 table-striped">
<thead>
<tr>
<th scope="col">Sr.No.</th>
<th scope="col">Name</th>
<th scope="col">Role</th>
<th scope="col">Salary</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Almand</td>
<td>Software Developer</td>
<td>60000</td>
</tr>
<tr>
<th scope="row">2</th>
<td>David</td>
<td>Tester</td>
<td>35000</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Sam</td>
<td>Data Analyst</td>
<td>40000</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Mona</td>
<td>Data Analyst</td>
<td>50000</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Oliver</td>
<td>Tester</td>
<td>45000</td>
</tr>
</tbody>
</table>
</body>
</html>Table head
添加 .table-secondary 类可在表格顶部添加灰色，如下面的示例所示。
Example
您可以使用 *编辑和运行 *选项编辑和尝试运行此代码。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
<title>Bootstrap - Table</title>
</head>
<body>
<table class="table">
<thead class="table-secondary">
<tr>
<th scope="col">Sr.No.</th>
<th scope="col">Name</th>
<th scope="col">Role</th>
<th scope="col">Salary</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Jhon</td>
<td>Software Developer</td>
<td>40000</td>
</tr>
<tr>
<th scope="row">2</th>
<td>David</td>
<td>Tester</td>
<td>50000</td>
</tr>
<tr>
<th scope="row">3</th>
<td >mery</td>
<td>Data Analyst</td>
<td>35000</td>
</tr>
</tbody>
</table>
</body>
</html>Table foot
.tfoot 类可在表格末尾添加页脚，如下面的示例所示。
Example
您可以使用 *编辑和运行 *选项编辑和尝试运行此代码。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
<title>Bootstrap - Table</title>
</head>
<body>
<table class="table">
<thead>
<tr>
<th scope="col">Sr.No.</th>
<th scope="col">Name</th>
<th scope="col">Role</th>
<th scope="col">Salary</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Jhon</td>
<td>Software Developer</td>
<td>40000</td>
</tr>
<tr>
<th scope="row">2</th>
<td>David</td>
<td>Tester</td>
<td>50000</td>
</tr>
<tr>
<th scope="row">3</th>
<td >mery</td>
<td>Data Analyst</td>
<td>35000</td>
</tr>
</tbody>
<tfoot>
<tr>
<th scope="row">footer</th>
<td >footer</td>
<td>footer</td>
<td>footer</td>
</tr>
</tfoot>
</table>
</body>
</html>Caption
<caption> 函数用于为表格提供标题，如下面的示例所示。
Example
您可以使用 *编辑和运行 *选项编辑和尝试运行此代码。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
<title>Bootstrap - Table</title>
</head>
<body>
<table class="table">
<caption>List of Employees</caption>
<thead>
<tr>
<th scope="col">Sr.No.</th>
<th scope="col">Name</th>
<th scope="col">Role</th>
<th scope="col">Salary</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Jhon</td>
<td>Software Developer</td>
<td>40000</td>
</tr>
<tr>
<th scope="row">2</th>
<td>David</td>
<td>Tester</td>
<td>50000</td>
</tr>
<tr>
<th scope="row">3</th>
<td >mery</td>
<td>Data Analyst</td>
<td>35000</td>
</tr>
</tbody>
</table>
</body>
</html>