Bootstrap | Tables | Set-2 - GeeksforGeeks

15 Jul, 2021
Bootstrap provides us series of classes that can be used to apply various styling to tables such as changing the heading appearance, making the rows striped, adding or removing borders, making rows hoverable. Bootstrap also provides classes for making tables responsive. 
Borderless table: To make the table borderless use the class table-borderless along with the class table class within the <table> tag. We can also make the dark table borderless by using the combination of classes table, table-dark and table-borderless within the <table> tag. See the example below for illustration.Example:
html
<!DOCTYPE html><html lang="en">  <head>    <!-- Required 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.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">     <title>Bootstrap | Tables</title>     <style>      h1{        color: green;        text-align: center;      }      div{        margin-top: 10px;      }    </style>   </head>  <body>    <div class="container">      <h1>GeeksForGeeks</h1>       <!-- table, table-borderless -->      <table class="table table-borderless">        <thead>          <tr>            <th scope="col">S. No.</td>            <th scope="col">Name</td>            <th scope="col">City</td>            <th scope="col">Age</td>          </tr>        </thead>        <tbody>          <tr>            <th scope="row">1</td>            <td>Ajay</td>            <td>Patna</td>            <td>20</td>          </tr>          <tr>            <th scope="row">2</td>            <td>Rahul</td>            <td>Chandigarh</td>            <td>17</td>          </tr>          <tr>            <th scope="row">3</td>            <td>Parush</td>            <td>Kolkata</td>            <td>22</td>          </tr>        </tbody>      </table>       <!-- table, table-borderless, table-dark -->      <table class="table table-borderless table-dark">        <thead>          <tr>            <th scope="col">S. No.</td>            <th scope="col">Name</td>            <th scope="col">City</td>            <th scope="col">Age</td>          </tr>        </thead>        <tbody>          <tr>            <th scope="row">1</td>            <td>Ajay</td>            <td>Patna</td>            <td>20</td>          </tr>          <tr>            <th scope="row">2</td>            <td>Rahul</td>            <td>Chandigarh</td>            <td>17</td>          </tr>          <tr>            <th scope="row">3</td>            <td>Parush</td>            <td>Kolkata</td>            <td>22</td>          </tr>        </tbody>      </table>     </div>  </body></html>
Output: 
Hoverable table: To make the rows of table hoverable use the class table-hover along with the class table within the <table> tag. We can also make the rows of dark table hoverable using the combination of classes table, table-hover, and table-dark within the <table> tag. See the example below for illustration.Example:
html
<!DOCTYPE html><html lang="en">  <head>    <!-- Required 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.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">     <title>Bootstrap | Tables</title>     <style>      h1{        color: green;        text-align: center;      }      div{        margin-top: 10px;      }    </style>   </head>  <body>    <div class="container">      <h1>GeeksForGeeks</h1>       <!-- table, table-hover -->      <table class="table table-hover">        <thead>          <tr>            <th scope="col">S. No.</td>            <th scope="col">Name</td>            <th scope="col">City</td>            <th scope="col">Age</td>          </tr>        </thead>        <tbody>          <tr>            <th scope="row">1</td>            <td>Ajay</td>            <td>Patna</td>            <td>20</td>          </tr>          <tr>            <th scope="row">2</td>            <td>Rahul</td>            <td>Chandigarh</td>            <td>17</td>          </tr>          <tr>            <th scope="row">3</td>            <td>Parush</td>            <td>Kolkata</td>            <td>22</td>          </tr>        </tbody>      </table>       <!-- table, table-hover, table-dark -->      <table class="table table-hover table-dark">        <thead>          <tr>            <th scope="col">S. No.</td>            <th scope="col">Name</td>            <th scope="col">City</td>            <th scope="col">Age</td>          </tr>        </thead>        <tbody>          <tr>            <th scope="row">1</td>            <td>Ajay</td>            <td>Patna</td>            <td>20</td>          </tr>          <tr>            <th scope="row">2</td>            <td>Rahul</td>            <td>Chandigarh</td>            <td>17</td>          </tr>          <tr>            <th scope="row">3</td>            <td>Parush</td>            <td>Kolkata</td>            <td>22</td>          </tr>        </tbody>      </table>     </div>  </body></html>
Output: 
Small table: To make the table smaller in size use the class table-sm along with the class table within the <table> tag. This reduces the cell padding to half. To make the dark table smaller in size use the combination of classes table, table-sm, and table-dark within the <table> tag. See the example below for illustration.Example:
html
<!DOCTYPE html><html lang="en">  <head>    <!-- Required 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.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">     <title>Bootstrap | Tables</title>     <style>      h1{        color: green;        text-align: center;      }      div{        margin-top: 10px;      }    </style>   </head>  <body>    <div class="container">      <h1>GeeksForGeeks</h1>       <!-- table, table-sm -->      <table class="table table-sm">        <thead>          <tr>            <th scope="col">S. No.</td>            <th scope="col">Name</td>            <th scope="col">City</td>            <th scope="col">Age</td>          </tr>        </thead>        <tbody>          <tr>            <th scope="row">1</td>            <td>Ajay</td>            <td>Patna</td>            <td>20</td>          </tr>          <tr>            <th scope="row">2</td>            <td>Rahul</td>            <td>Chandigarh</td>            <td>17</td>          </tr>          <tr>            <th scope="row">3</td>            <td>Parush</td>            <td>Kolkata</td>            <td>22</td>          </tr>        </tbody>      </table>       <!-- table, table-sm, table-dark -->      <table class="table table-sm table-dark">        <thead>          <tr>            <th scope="col">S. No.</td>            <th scope="col">Name</td>            <th scope="col">City</td>            <th scope="col">Age</td>          </tr>        </thead>        <tbody>          <tr>            <th scope="row">1</td>            <td>Ajay</td>            <td>Patna</td>            <td>20</td>          </tr>          <tr>            <th scope="row">2</td>            <td>Rahul</td>            <td>Chandigarh</td>            <td>17</td>          </tr>          <tr>            <th scope="row">3</td>            <td>Parush</td>            <td>Kolkata</td>            <td>22</td>          </tr>        </tbody>      </table>     </div>  </body></html>
Output:
Colored table: Bootstrap provides us a number of contextual classes that can be used to color the entire row or a single cell of table. These classes should be used with the light table and not with the dark table for better appearance. To color dark tables, we can use the background color classes of Bootstrap. The contextual classes are given below. See the example for illustration. 
html
<!DOCTYPE html><html lang="en">  <head>    <!-- Required 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.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">     <title>Bootstrap | Tables</title>     <style>      h1{        color: green;        text-align: center;      }      div{        margin-top: 10px;      }    </style>   </head>  <body>    <div class="container">      <h1>GeeksForGeeks</h1>       <!-- table, table-primary, table-warning, table-danger -->      <table class="table">        <thead>          <tr>            <th scope="col">S. No.</td>            <th scope="col">Name</td>            <th scope="col">City</td>            <th scope="col">Age</td>          </tr>        </thead>        <tbody>          <tr class="table-primary">            <th scope="row">1</td>            <td>Ajay</td>            <td>Patna</td>            <td>20</td>          </tr>          <tr class="table-warning">            <th scope="row">2</td>            <td>Rahul</td>            <td>Chandigarh</td>            <td>17</td>          </tr>          <tr class="table-danger">            <th scope="row">3</td>            <td>Parush</td>            <td>Kolkata</td>            <td>22</td>          </tr>        </tbody>      </table>       <!-- table, bg-danger, bg-primary, table-dark -->      <table class="table table-dark">        <thead>          <tr>            <th scope="col">S. No.</td>            <th scope="col">Name</td>            <th scope="col">City</td>            <th scope="col">Age</td>          </tr>        </thead>        <tbody>          <tr class="bg-danger">            <th scope="row">1</td>            <td>Ajay</td>            <td>Patna</td>            <td>20</td>          </tr>          <tr>            <th scope="row">2</td>            <td>Rahul</td>            <td>Chandigarh</td>            <td>17</td>          </tr>          <tr class="bg-primary">            <th scope="row">3</td>            <td>Parush</td>            <td>Kolkata</td>            <td>22</td>          </tr>        </tbody>      </table>     </div>  </body></html>
Output:
Responsive tables: To make the table responsive on all viewport size, wrap the table within a opening and closing <div> tags, having class table-responsive within the opening <div> tag. Similarly, to make the table responsive depending upon the viewport size, we use the class table-responsive{-sm|-md|-lg|-xl}, according to the viewport size according to which we want to make our table responsive.In responsive tables, a horizontal scroll bar will appear if the table does not fit within the viewport of current size.In case of viewport specific responsive table, table will become responsive if the viewport size is less than the viewport specified by the class table-responsive{-sm|-md|-lg|-xl}. See the examples below for illustration.Example 1: table-responsive
html
<!DOCTYPE html><html lang="en">  <head>    <!-- Required 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.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">     <title>Bootstrap | Tables</title>     <style>      h1{        color: green;        text-align: center;      }      div{        margin-top: 10px;      }    </style>   </head>  <body>    <div class="container">      <h1>GeeksForGeeks</h1>       <!-- table-responsive -->      <div class="table-responsive">                 <!-- table -->        <table class="table">          <thead>            <tr>              <th scope="col">Head</td>              <th scope="col">Head</td>              <th scope="col">Head</td>              <th scope="col">Head</td>              <th scope="col">Head</td>              <th scope="col">Head</td>              <th scope="col">Head</td>              <th scope="col">Head</td>              <th scope="col">Head</td>              <th scope="col">Head</td>              <th scope="col">Head</td>              <th scope="col">Head</td>             </tr>          </thead>          <tbody>            <tr>              <td>Data</td>              <td>Data</td>              <td>Data</td>              <td>Data</td>              <td>Data</td>              <td>Data</td>              <td>Data</td>              <td>Data</td>              <td>Data</td>              <td>Data</td>              <td>Data</td>              <td>Data</td>            </tr>            <tr>              <td>Data</td>              <td>Data</td>              <td>Data</td>              <td>Data</td>              <td>Data</td>              <td>Data</td>              <td>Data</td>              <td>Data</td>              <td>Data</td>              <td>Data</td>              <td>Data</td>              <td>Data</td>            </tr>            <tr>              <td>Data</td>              <td>Data</td>              <td>Data</td>              <td>Data</td>              <td>Data</td>              <td>Data</td>              <td>Data</td>              <td>Data</td>              <td>Data</td>              <td>Data</td>              <td>Data</td>              <td>Data</td>            </tr>          </tbody>        </table>       </div>                   </div>  </body></html>
Output:
Example 2: table-responsive-md
html
<!DOCTYPE html><html lang="en">  <head>    <!-- Required 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.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">     <title>Bootstrap | Tables</title>     <style>      h1{        color: green;        text-align: center;      }      div{        margin-top: 10px;      }    </style>   </head>  <body>    <div class="container">      <h1>GeeksForGeeks</h1>       <!-- table-responsive-md -->      <div class="table-responsive-md">                 <!-- table -->        <table class="table">          <thead>            <tr>              <th scope="col">Head</td>              <th scope="col">Head</td>              <th scope="col">Head</td>              <th scope="col">Head</td>              <th scope="col">Head</td>              <th scope="col">Head</td>              <th scope="col">Head</td>              <th scope="col">Head</td>              <th scope="col">Head</td>              <th scope="col">Head</td>              <th scope="col">Head</td>              <th scope="col">Head</td>             </tr>          </thead>          <tbody>            <tr>              <td>Data</td>              <td>Data</td>              <td>Data</td>              <td>Data</td>              <td>Data</td>              <td>Data</td>              <td>Data</td>              <td>Data</td>              <td>Data</td>              <td>Data</td>              <td>Data</td>              <td>Data</td>            </tr>            <tr>              <td>Data</td>              <td>Data</td>              <td>Data</td>              <td>Data</td>              <td>Data</td>              <td>Data</td>              <td>Data</td>              <td>Data</td>              <td>Data</td>              <td>Data</td>              <td>Data</td>              <td>Data</td>            </tr>            <tr>              <td>Data</td>              <td>Data</td>              <td>Data</td>              <td>Data</td>              <td>Data</td>              <td>Data</td>              <td>Data</td>              <td>Data</td>              <td>Data</td>              <td>Data</td>              <td>Data</td>              <td>Data</td>            </tr>          </tbody>        </table>       </div>                   </div>  </body></html>
Output:
Supported Browser:
Google Chrome
Internet Explorer
Firefox
Opera
Safari 
 
ysachin2314
Bootstrap
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
How to change navigation bar color in Bootstrap ?
Form validation using jQuery
How to pass data into a bootstrap modal?
How to align navbar items to the right in Bootstrap 4 ?
How to Show Images on Click using HTML ?
Roadmap to Become a Web Developer in 2022
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?