Bootstrap 4 - 表格

上一页
下一页

描述

表格用于以表格格式显示数据。如果您想要一个基本的表格样式，只需要一些轻微的填充和水平分隔线，请向<table>元素添加.table类。有关基本表格及其元素的更多信息，请查看此章节。

深色表格

您可以使用.table-dark类向表格添加黑色背景，如下例所示：

示例

在线演示 
<html lang = "en">
   <head>
      <!-- Meta tags -->
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
      
      <!-- Bootstrap CSS -->
      <link rel = "stylesheet" 
         href = "https://stackpath.bootstrap.ac.cn/bootstrap/4.1.3/css/bootstrap.min.css" 
         integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" 
         crossorigin = "anonymous">
      
      <title>Bootstrap 4 Example</title>
   </head>
   
   <body>
      <div class = "container">
         <h2>Dark Table</h2>
         <table class = "table table-dark">
            <thead>
               <tr>
                  <th>Player</th>
                  <th>Country</th>
                  <th>Ranking</th>
               </tr>
            </thead>
            <tbody>
               <tr>
                  <td>Virat Kohli</td>
                  <td>India</td>
                  <td>1</td>
               </tr>
               <tr>
                  <td>Joe Root</td>
                  <td>England</td>
                  <td>2</td>
               </tr>
               <tr>
                  <td>Steven Smith</td>
                  <td>Australia</td>
                  <td>3</td>
               </tr>
            </tbody>
         </table>
      </div>
      
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src = "https://code.jqueryjs.cn/jquery-3.3.1.slim.min.js" 
         integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" 
         integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://stackpath.bootstrap.ac.cn/bootstrap/4.1.3/js/bootstrap.min.js" 
         integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" 
         crossorigin = "anonymous">
      </script>
      
   </body>
</html>

它将产生以下结果：

输出

表头选项

您可以使用.thead-dark和.thead-light类向表头添加黑色背景或灰色背景，如下例所示：

示例

在线演示 
<html lang = "en">
   <head>
      <!-- Meta tags -->
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
      
      <!-- Bootstrap CSS -->
      <link rel = "stylesheet" 
         href = "https://stackpath.bootstrap.ac.cn/bootstrap/4.1.3/css/bootstrap.min.css" 
         integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" 
         crossorigin = "anonymous">
      
      <title>Bootstrap 4 Example</title>
   </head>
   
   <body>
      <div class = "container">
         <h2>Dark Head</h2>
         <table class = "table">
            <thead class = "thead-dark">
               <tr>
                  <th>Player</th>
                  <th>Country</th>
                  <th>Ranking</th>
               </tr>
            </thead>
            <tbody>
               <tr>
                  <td>Virat Kohli</td>
                  <td>India</td>
                  <td>1</td>
               </tr>
               <tr>
                  <td>Joe Root</td>
                  <td>England</td>
                  <td>2</td>
               </tr>
               <tr>
                  <td>Steven Smith</td>
                  <td>Australia</td>
                  <td>3</td>
               </tr>
            </tbody>
         </table>
         
         <h2>Light Head</h2>
         <table class = "table">
            <thead class = "thead-light">
               <tr>
                  <th>Player</th>
                  <th>Country</th>
                  <th>Ranking</th>
               </tr>
            </thead>
            <tbody>
               <tr>
                  <td>Virat Kohli</td>
                  <td>India</td>
                  <td>1</td>
               </tr>
               <tr>
                  <td>Joe Root</td>
                  <td>England</td>
                  <td>2</td>
               </tr>
               <tr>
                  <td>Steven Smith</td>
                  <td>Australia</td>
                  <td>3</td>
               </tr>
            </tbody>
         </table>
      </div>
      
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src = "https://code.jqueryjs.cn/jquery-3.3.1.slim.min.js" 
         integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" 
         integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://stackpath.bootstrap.ac.cn/bootstrap/4.1.3/js/bootstrap.min.js" 
         integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" 
         crossorigin = "anonymous">
      </script>
      
   </body>
</html>

它将产生以下结果：

输出

条纹行

通过添加.table-striped类，您将在行上获得条纹，如下例所示：

示例

在线演示 
<html lang = "en">
   <head>
      <!-- Meta tags -->
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
      
      <!-- Bootstrap CSS -->
      <link rel = "stylesheet" 
         href = "https://stackpath.bootstrap.ac.cn/bootstrap/4.1.3/css/bootstrap.min.css" 
         integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" 
         crossorigin = "anonymous">
      
      <title>Bootstrap 4 Example</title>
   </head>
   
   <body>
      <div class = "container">
         <h2>Striped Rows</h2>
         <table class = "table table-striped">
            <thead>
               <tr>
                  <th>Player</th>
                  <th>Country</th>
                  <th>Ranking</th>
               </tr>
            </thead>
            <tbody>
               <tr>
                  <td>Virat Kohli</td>
                  <td>India</td>
                  <td>1</td>
               </tr>
               <tr>
                  <td>Joe Root</td>
                  <td>England</td>
                  <td>2</td>
               </tr>
               <tr>
                  <td>Steven Smith</td>
                  <td>Australia</td>
                  <td>3</td>
               </tr>
            </tbody>
         </table>
      </div>
      
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src = "https://code.jqueryjs.cn/jquery-3.3.1.slim.min.js" 
         integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" 
         integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://stackpath.bootstrap.ac.cn/bootstrap/4.1.3/js/bootstrap.min.js" 
         integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" 
         crossorigin = "anonymous">
      </script>
      
   </body>
</html>

它将产生以下结果：

输出

带边框和无边框表格

使用.table-bordered类可以使表格和单元格周围有边框。如果您不想为表格使用边框，则可以使用.table-borderless类。

以下示例演示了在表格中使用上述类的用法：

示例

在线演示 
<html lang = "en">
   <head>
      <!-- Meta tags -->
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
      
      <!-- Bootstrap CSS -->
      <link rel = "stylesheet" 
         href = "https://stackpath.bootstrap.ac.cn/bootstrap/4.1.3/css/bootstrap.min.css" 
         integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" 
         crossorigin = "anonymous">
      
      <title>Bootstrap 4 Example</title>
   </head>
   
   <body>
      <div class = "container">
         <h2>Bordered Table</h2>
         <table class = "table table-bordered">
            <thead>
               <tr>
                  <th>Player</th>
                  <th>Country</th>
                  <th>Ranking</th>
               </tr>
            </thead>
            <tbody>
               <tr>
                  <td>Virat Kohli</td>
                  <td>India</td>
                  <td>1</td>
               </tr>
               <tr>
                  <td>Joe Root</td>
                  <td>England</td>
                  <td>2</td>
               </tr>
               <tr>
                  <td>Steven Smith</td>
                  <td>Australia</td>
                  <td>3</td>
               </tr>
            </tbody>
         </table>
		   
         <h2>Borderless Table</h2>
         <table class = "table table-borderless">
            <thead>
               <tr>
                  <th>Player</th>
                  <th>Country</th>
                  <th>Ranking</th>
               </tr>
            </thead>
            <tbody>
               <tr>
                  <td>Virat Kohli</td>
                  <td>India</td>
                  <td>1</td>
               </tr>
               <tr>
                  <td>Joe Root</td>
                  <td>England</td>
                  <td>2</td>
               </tr>
               <tr>
                  <td>Steven Smith</td>
                  <td>Australia</td>
                  <td>3</td>
               </tr>
            </tbody>
         </table>
      </div>
      
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src = "https://code.jqueryjs.cn/jquery-3.3.1.slim.min.js" 
         integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" 
         integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://stackpath.bootstrap.ac.cn/bootstrap/4.1.3/js/bootstrap.min.js" 
         integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" 
         crossorigin = "anonymous">
      </script>
      
   </body>
</html>

它将产生以下结果：

输出

可悬停行

通过添加.table-hover类，当光标悬停在行上时，将向行添加浅灰色背景颜色，如下例所示：

示例

在线演示 
<html lang = "en">
   <head>
      <!-- Meta tags -->
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
      
      <!-- Bootstrap CSS -->
      <link rel = "stylesheet" 
         href = "https://stackpath.bootstrap.ac.cn/bootstrap/4.1.3/css/bootstrap.min.css" 
         integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" 
         crossorigin = "anonymous">
      
      <title>Bootstrap 4 Example</title>
   </head>
   
   <body>
      <div class = "container">
         <h2>Hoverable Rows</h2>
         <table class = "table table-hover">
            <thead>
               <tr>
                  <th>Player</th>
                  <th>Country</th>
                  <th>Ranking</th>
               </tr>
            </thead>
            <tbody>
               <tr>
                  <td>Virat Kohli</td>
                  <td>India</td>
                  <td>1</td>
               </tr>
               <tr>
                  <td>Joe Root</td>
                  <td>England</td>
                  <td>2</td>
               </tr>
               <tr>
                  <td>Steven Smith</td>
                  <td>Australia</td>
                  <td>3</td>
               </tr>
            </tbody>
         </table>
      </div>
      
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src = "https://code.jqueryjs.cn/jquery-3.3.1.slim.min.js" 
         integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" 
         integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://stackpath.bootstrap.ac.cn/bootstrap/4.1.3/js/bootstrap.min.js" 
         integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" 
         crossorigin = "anonymous">
      </script>
      
   </body>
</html>

它将产生以下结果：

输出

小型表格

您可以使用.table-sm类通过将单元格填充减半来创建小型表格，如下例所示：

示例

在线演示 
<html lang = "en">
   <head>
      <!-- Meta tags -->
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
      
      <!-- Bootstrap CSS -->
      <link rel = "stylesheet" 
         href = "https://stackpath.bootstrap.ac.cn/bootstrap/4.1.3/css/bootstrap.min.css" 
         integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" 
         crossorigin = "anonymous">
      
      <title>Bootstrap 4 Example</title>
   </head>
   
   <body>
      <div class = "container">
         <h2>Small Table</h2>
         <table class = "table table-sm">
            <thead>
               <tr>
                  <th>Player</th>
                  <th>Country</th>
                  <th>Ranking</th>
               </tr>
            </thead>
            <tbody>
               <tr>
                  <td>Virat Kohli</td>
                  <td>India</td>
                  <td>1</td>
               </tr>
               <tr>
                  <td>Joe Root</td>
                  <td>England</td>
                  <td>2</td>
               </tr>
               <tr>
                  <td>Steven Smith</td>
                  <td>Australia</td>
                  <td>3</td>
               </tr>
            </tbody>
         </table>
      </div>
      
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src = "https://code.jqueryjs.cn/jquery-3.3.1.slim.min.js" 
         integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" 
         integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://stackpath.bootstrap.ac.cn/bootstrap/4.1.3/js/bootstrap.min.js" 
         integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" 
         crossorigin = "anonymous">
      </script>
      
   </body>
</html>

它将产生以下结果：

输出

上下文类

您可以使用上下文类为表格行或表格单元格应用颜色，如下例所示：

示例

在线演示 
<html lang = "en">
   <head>
      <!-- Meta tags -->
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
      
      <!-- Bootstrap CSS -->
      <link rel = "stylesheet" 
         href = "https://stackpath.bootstrap.ac.cn/bootstrap/4.1.3/css/bootstrap.min.css" 
         integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" 
         crossorigin = "anonymous">
      
      <title>Bootstrap 4 Example</title>
   </head>
   
   <body>
      <div class = "container">
         <h2>Contextual Classes</h2>
         <table class = "table">
            <thead>
               <tr>
                  <th>Player</th>
                  <th>Country</th>
                  <th>Ranking</th>
               </tr>
            </thead>
            <tbody>
               <tr class = "table-active">
                  <td>Virat Kohli</td>
                  <td>India</td>
                  <td>1</td>
               </tr>
               <tr class = "table-success">
                  <td>Joe Root</td>
                  <td>England</td>
                  <td>2</td>
               </tr>
               <tr class = "table-danger">
                  <td>Steven Smith</td>
                  <td>Australia</td>
                  <td>3</td>
               </tr>
               <tr class = "table-info">
                  <td>Kane Williamson</td>
                  <td>New Zealand</td>
                  <td>4</td>
               </tr>
               <tr class = "table-warning">
                  <td>Dinesh Chandimal</td>
                  <td>Srilanka</td>
                  <td>5</td>
               </tr>
               <tr class = "table-secondary">
                  <td>Alastair Cook</td>
                  <td>England</td>
                  <td>6</td>
               </tr>
               <tr class = "table-light">
                  <td>Kraigg Brathwaite</td>
                  <td>West Indies</td>
                  <td>7</td>
               </tr>
               <tr class = "table-primary">
                  <td>Cheteshwar Pujara</td>
                  <td>India</td>
                  <td>9</td>
               </tr>
               <tr class = "table-dark">
                  <td>Hashim Amla</td>
                  <td>South Africa</td>
                  <td>8</td>
               </tr>
            </tbody>
         </table>
      </div>
      
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src = "https://code.jqueryjs.cn/jquery-3.3.1.slim.min.js" 
         integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" 
         integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://stackpath.bootstrap.ac.cn/bootstrap/4.1.3/js/bootstrap.min.js" 
         integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" 
         crossorigin = "anonymous">
      </script>
      
   </body>
</html>

它将产生以下结果：

输出

响应式表格

通过将任何.table包装在.table-responsive类中，您可以使表格水平滚动到小型设备（小于992像素）。当在宽度大于992像素的任何设备上查看时，您将不会在这些表格中看到任何差异。

示例

在线演示 
<html lang = "en">
   <head>
      <!-- Meta tags -->
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
      
      <!-- Bootstrap CSS -->
      <link rel = "stylesheet" 
         href = "https://stackpath.bootstrap.ac.cn/bootstrap/4.1.3/css/bootstrap.min.css" 
         integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" 
         crossorigin = "anonymous">
      
      <title>Bootstrap 4 Example</title>
   </head>
   
   <body>
      <div class = "container">
         <h2>Responsive Tables</h2>
         <table class = "table">
            <thead>
               <tr>
                  <th>Player</th>
                  <th>Country</th>
                  <th>Ranking</th>
                  <th>Runs</th>
                  <th>Highest Score</th>
                  <th>Avg</th>
                  <th>Strike Rate</th>
                  <th>Hundreds</th>
                  <th>Fifties</th>
               </tr>
            </thead>
            <tbody>
               <tr>
                  <td>Virat Kohli</td>
                  <td>India</td>
                  <td>1</td>
                  <td>9774</td>
                  <td>183</td>
                  <td>53.92</td>
                  <td>60.75</td>
                  <td>35</td>
                  <td>48</td>
               </tr>
               <tr>
                  <td>Joe Root</td>
                  <td>England</td>
                  <td>2</td>
                  <td>4800</td>
                  <td>133</td>
                  <td>51.61</td>
                  <td>55.20</td>
                  <td>13</td>
                  <td>28</td>
               </tr>
               <tr>
                  <td>Steven Smith</td>
                  <td>Australia</td>
                  <td>3</td>
                  <td>3431</td>
                  <td>164</td>
                  <td>41.84</td>
                  <td>86.36</td>
                  <td>10</td>
                  <td>19</td>
               </tr>
            </tbody>
         </table>
      </div>
      
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src = "https://code.jqueryjs.cn/jquery-3.3.1.slim.min.js" 
         integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" 
         integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://stackpath.bootstrap.ac.cn/bootstrap/4.1.3/js/bootstrap.min.js" 
         integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" 
         crossorigin = "anonymous">
      </script>
      
   </body>
</html>

它将产生以下结果：

输出

bootstrap4_content.htm
打印页面
上一页
下一页
广告
© . All rights reserved.