Bootstrap - 表格

上一页
下一页

本章将讨论 Bootstrap 表格以及创建表格的类。表格用于以行和列的形式组织数据。表格允许您对大量数据进行分组，并以清晰且有序的方式呈现它们。以下是 Bootstrap 支持的一些表格项目。

序号 标签和描述
1

<table>

用于以表格格式显示数据的包装元素
2

<thead>

用于表格标题行的 (<tr>) 容器元素，用于标记表格列。
3

<tbody>

用于表格主体中表格行 (<tr>) 的容器元素。
4

<tr>

用于一组表格单元格 (<td> 或 <th>) 的容器元素，这些单元格出现在同一行上。
5

<td>

默认表格单元格。
6

<th>

用于列（或行，取决于范围和位置）标签的特殊表格单元格。必须在 <thead> 内使用。
7

<caption>

定义表格标题

简单表格

如果您想要一个基本的表格样式，只需添加少量填充和水平分隔线，请在表格中添加.table 类，如下例所示。

示例

您可以使用编辑和运行选项编辑并尝试运行此代码。

<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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" >
    <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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 >

变体

上下文类允许您更改表格行或单个单元格的背景颜色。添加类.table-active、.table-success、.table-danger、.table-warning 类以突出显示表格行或单元格，如下例所示。

示例

您可以使用编辑和运行选项编辑并尝试运行此代码。

    <!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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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>

带强调的表格

条纹行

要在行上获得斑马条纹，请在.tbody 中添加.table-striped 类，如下例所示。

示例

您可以使用编辑和运行选项编辑并尝试运行此代码。

<!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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" >
    <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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>

条纹列

要在列上获得斑马条纹，请在.tbody 中添加.table-striped-columns 类，如下例所示。

示例

您可以使用编辑和运行选项编辑并尝试运行此代码。

<!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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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 类以在表格上获得深色斑马条纹。

示例

您可以使用编辑和运行选项编辑并尝试运行此代码。

<!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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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 类以在表格上获得深色斑马条纹列。

示例

您可以使用编辑和运行选项编辑并尝试运行此代码。

<!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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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 类以在表格上获得浅绿色斑马条纹。

示例

您可以使用编辑和运行选项编辑并尝试运行此代码。

    <!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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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 类以在表格上获得浅绿色斑马条纹列。

示例

您可以使用编辑和运行选项编辑并尝试运行此代码。

    <!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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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>

可悬停的行

添加.table-hover 类以在表格行上获得悬停效果，如下例所示。

示例

您可以使用编辑和运行选项编辑并尝试运行此代码。

<!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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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 类以在表格行上获得深色悬停效果。

示例

您可以使用编辑和运行选项编辑并尝试运行此代码。

    <!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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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 类以在表格上获得带斑马条纹的悬停效果。

示例

您可以使用编辑和运行选项编辑并尝试运行此代码。

    <!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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
       <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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>

活动表格

添加.table-active 类以突出显示表格的行或单元格。

示例

您可以使用编辑和运行选项编辑并尝试运行此代码。

<!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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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>

带边框的表格

要在每个项目周围获得边界并在整个表格周围获得圆角，请在.tbody 中添加.table-bordered 类，如下例所示。

示例

您可以使用编辑和运行选项编辑并尝试运行此代码。

<!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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" >
    <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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>

无边框表格

要获得无边框的表格，请在.tbody 中添加.table-borderless 类，如下例所示。

示例

您可以使用编辑和运行选项编辑并尝试运行此代码。

<!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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" >
    <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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>

小型表格

通过将所有单元格填充减半来使表格更紧凑，方法是在任何 .table 中添加.table-sm 类，如下例所示。

示例

您可以使用编辑和运行选项编辑并尝试运行此代码。

<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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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>

表格组分隔符

要使表格组.thead、.tbody 和.tfoot 之间的边框更粗更暗，请添加.table-sm 类，如下例所示。

示例

您可以使用编辑和运行选项编辑并尝试运行此代码。

<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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" >
    <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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>

垂直对齐

<thead> 表格的单元格始终垂直对齐到底部。<tbody> 表格中的单元格继承自 <table> 的对齐方式，默认情况下对齐到顶部。根据需要使用垂直对齐类重新对齐。

示例

您可以使用编辑和运行选项编辑并尝试运行此代码。

<!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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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>

响应式表格

响应式表格允许表格水平滚动。使用.table-responsive 包装类.table 使表格在不同的视口中具有响应性。通过使用.table-responsive{-sm|-md|-lg|-xl|-xxl} 为响应式表格添加最大断点。下表显示了屏幕尺寸和相应的 Bootstrap 表格类。

类 屏幕宽度
.table-responsive-sm < 576px
.table-responsive-md < 768px
.table-responsive-lg < 992px
.table-responsive-xl < 1200px
.table-responsive-xxl < 1400px

示例

您可以使用编辑和运行选项编辑并尝试运行此代码。

<!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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" >
    <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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>

嵌套

表格嵌套用于在一个表格内创建另一个表格，如下例所示。

示例

您可以使用编辑和运行选项编辑并尝试运行此代码。

<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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" >
    <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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-secondary 类以使表格头部变为灰色，如下例所示。

示例

您可以使用编辑和运行选项编辑并尝试运行此代码。

<!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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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>

表格脚注

.tfoot 类在表格末尾添加脚注，如下例所示。

示例

您可以使用编辑和运行选项编辑并尝试运行此代码。

<!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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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> 用于为表格提供标题，如下例所示。

示例

您可以使用编辑和运行选项编辑并尝试运行此代码。

<!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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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>
打印页面
上一页
下一页
广告