Bootstrap 4 - Tables

Description

Tables are used for displaying the data in a tabular format. If you want a basic table style with just some light padding and horizontal dividers, add the .table class to the <table> element. For more information on basic table and its elements, check out this chapter.

Dark Table

You can use the .table-dark class to add a black background to the table as seen in the following example −

Example

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

It will produce the following result −

Output

Table Head Options

You can add a black background or a grey background to table headers by using .thead-dark and .thead-light classes as seen in the following example −

Example

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

It will produce the following result −

Output

Striped Rows

By adding the .table-striped class, you will get stripes on the rows as seen in the following example −

Example

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

It will produce the following result −

Output

Bordered and Borderless Table

Use .table-bordered class to make the borders around the table and cells. If you don't want to use border for a table, then use the .table-borderless class.

The following example demonstrates usage of above classes in the table −

Example

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

It will produce the following result −

Output

Hoverable Rows

By adding the .table-hover class, a light gray background color will be added to rows while the cursor hovers over them, as seen in the following example −

Example

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

It will produce the following result −

Output

Small Table

You can use the .table-sm class to make the small table by cutting cell padding in half as shown in the below example −

Example

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

It will produce the following result −

Output

Contextual Classes

You can use contextual classes to apply color to table rows or table cells as seen in the following example −

Example

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

It will produce the following result −

Output

Responsive Tables

By wrapping any .table in .table-responsive class, you will make the table scroll horizontally up to small devices (under 992px). When viewing on anything larger than 992px wide, you will not see any difference in these tables.

Example

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

It will produce the following result −

Output

bootstrap4_content.htm
Advertisements