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.bootstrapcdn.com/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.jquery.com/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.bootstrapcdn.com/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.bootstrapcdn.com/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.jquery.com/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.bootstrapcdn.com/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.bootstrapcdn.com/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.jquery.com/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.bootstrapcdn.com/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.bootstrapcdn.com/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.jquery.com/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.bootstrapcdn.com/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.bootstrapcdn.com/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.jquery.com/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.bootstrapcdn.com/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.bootstrapcdn.com/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.jquery.com/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.bootstrapcdn.com/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.bootstrapcdn.com/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.jquery.com/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.bootstrapcdn.com/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.bootstrapcdn.com/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.jquery.com/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.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" 
         integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" 
         crossorigin = "anonymous">
      </script>
      
   </body>
</html>

它將產生以下結果：

輸出

bootstrap4_content.htm
列印頁面
上一頁
下一頁
廣告