Bootstrap 简明教程

Bootstrap - Tables

此章节将会讨论 Bootstrap 表格和创建表格的类。表格用于以行和列的形式组织数据。表格允许你对海量数据进行分组，并以清晰有序的方式呈现它们。下面列出了一些受 Bootstraps 支持的表格项目。

This chapter will discuss about bootstrap tables and the classes to create table. Tables is used to organize data in the form of rows and columns. Tables allow you to group huge amounts of data and present them clearly and in an orderly manner. Some table items supported by Bootstraps are listed below.

Sr.No.

Tag & Description

1

<table> Wrapping element for displaying data in a tabular format

2

<thead> Container element for table header rows (<tr>) to label table columns.

3

<tbody> Container element for table rows (<tr>) in the body of the table.

4

<tr> Container element for a set of table cells (<td> or <th>) that appears on a single row.

5

<td> Default table cell.

6

<th> Special table cell for column (or row, depending on scope and placement) labels. Must be used within a <thead>

7

<caption> Defines a table caption

Simple table

如果您想要基本表样式，只带有少量轻微留白和水平分隔线，请在表中添加 *.table *类，如下面的示例所示。

If you want a basic table style with just a little light padding and horizontal dividers, add the *.table *class at table, as shown in the example below.

Example

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

You can edit and try running this code using *Edit & Run *option.

<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 类以突出显示表格行或单元格，如以下示例所示。

The contextual classes allow you to change the background color of your table rows or individual cells. Add classes .table-active, .table-success, .table-danger, .table-warning class to Highlight a table row or cell, as shown in the below example.

Example

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

You can edit and try running this code using *Edit & Run * option.

    <!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>

Accented tables

Striped rows

要获得行的斑马条纹，请添加 .table-striped * class in the *.tbody ，如以下示例所示。

To get zebra-striping on the rows add .table-striped * class in the *.tbody as shown in the below example.

Example

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

You can edit and try running this code using *Edit & Run * option.

<!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 类，如以下示例所示。

To get zebra-striping on the columns add .table-striped-columns class in the .tbody as shown in the below example.

Example

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

You can edit and try running this code using *Edit & Run * option.

<!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 类以获得表格上深色斑马条纹。

Add the classes .table-dark and .table-striped to get the dark color zebra-striping on the table.

Example

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

You can edit and try running this code using *Edit & Run * option.

<!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 类以获得深色斑马条纹列。

Add the classes .table-dark and .table-striped-columns to get the dark color zebra-striping columns.

Example

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

You can edit and try running this code using *Edit & Run * option.

<!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 类以获得表格上浅绿色斑马条纹。

Add the classes .table-success and .table-striped to get the light green color zebra-striping on the table.

Example

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

You can edit and try running this code using *Edit & Run * option.

    <!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 类以获得表格上浅绿色斑马条纹列。

Add the classes .table-success and .table-striped-columns to get the light green color zebra-striping columns on the table.

Example

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

You can edit and try running this code using *Edit & Run * option.

    <!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 类以获得表格行上的悬停效果，如以下示例所示。

Add the .table-hover class to get the hover effect on table rows as shown in the below example.

Example

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

You can edit and try running this code using *Edit & Run * option.

<!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 类以获得表格行上的深色悬停效果。

Add the classes .table-hover and .table-dark to get the dark color hover effect on table rows.

Example

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

You can edit and try running this code using *Edit & Run * option.

    <!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 类以获得表格上的悬停效果和斑马条纹。

Add the classes .table-hover and .table-striped to get the hover effect with zebra-striping on the table.

Example

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

You can edit and try running this code using *Edit & Run * option.

    <!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 类以突出显示表格的行或单元格。

Add .table-active class to highlight the row or cell of the table.

Example

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

You can edit and try running this code using *Edit & Run * option.

<!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 ，如以下示例所示。

To get boundaries around each item and rounded corners around the whole table add .table-bordered * class in the *.tbody as shown in the below example.

Example

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

You can edit and try running this code using *Edit & Run * option.

<!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 ，如下面的示例所示。

To get the table without borders add .table-borderless * class in the *.tbody as shown in the below example.

Example

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

You can edit and try running this code using *Edit & Run * option.

<!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 * 类型，如下面的示例所示。

To make table more compact by cutting all cell padding in half by adding *.table-sm * class to any .table, as seen in the below example.

Example

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

You can edit and try running this code using *Edit & Run * option.

<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 * 类型，如下面的示例所示。

To make table border thicker and darker between table groups .thead, .tbody *and .tfoot* add a *.table-sm *class, as seen in the below example.

Example

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

You can edit and try running this code using *Edit & Run * option.

<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> 继承其对齐方式且默认情况下垂直对齐至顶部。按需使用垂直对齐类型重新对齐。

The cells of the <thead> table are always vertically aligned to the bottom. The cells in the <tbody> table inherit their alignment from <table> and are aligned to the top by default. Use the vertical alignment classes to re-align as required

Example

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

You can edit and try running this code using *Edit & Run * option.

<!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 表格类型：

Responsive tables enable horizontal scrolling of the table. Wrapping class .table with .table-responsive makes a table responsive across different view ports. Add a maximum breakpoint to a responsive table by using .table-responsive{-sm|-md|-lg|-xl|-xxl}. Following table depicts the screensize and respective Bootstrap table class:

Class

Screen width

.table-responsive-sm

< 576px

.table-responsive-md

< 768px

.table-responsive-lg

< 992px

.table-responsive-xl

< 1200px

.table-responsive-xxl

< 1400px

Example

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

You can edit and try running this code using *Edit & Run * option.

<!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

表格嵌套用于在表格内创建表格，如下面的示例所示。

Table nesting is used to create a table inside of a table, as seen in the below example.

Example

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

You can edit and try running this code using *Edit & Run * option.

<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>

Anatomy

Table head

添加 .table-secondary 类可在表格顶部添加灰色，如下面的示例所示。

Add classes .table-secondary to make table head gray color, as seen in the below example.

Example

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

You can edit and try running this code using *Edit & Run * option.

<!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 类可在表格末尾添加页脚，如下面的示例所示。

The .tfoot class add footer at the end of the table, as seen in the below example.

Example

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

You can edit and try running this code using *Edit & Run * option.

<!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> 函数用于为表格提供标题，如下面的示例所示。

A <caption> functions use to give a heading for a table., as seen in the below example.

Example

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

You can edit and try running this code using *Edit & Run * option.

<!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>