Open In App

What is a Condensed Table in Bootstrap ?

Improve
Improve
Like Article
Like
Save
Share
Report

The .table-condensed is a class in Bootstrap 3 Framework. It can be used when we want to have row padding half so that we can condense the table. So that I can be more user-friendly. Thus .table-condensed class is used when you want to display denser tables on web pages. If we don’t use .table-condensed class in the bootstrap table then when you have a dense table and you try to view it on small screen devices then we need to scroll horizontally to view hidden columns whereas when .table-condensed class is used the whole table is condensed as per your screen size so that you can get a complete view of the table at once.

Syntax:

For Bootstrap 3

<table class="table table-condensed">

For Bootstrap 4

<table class="table table-sm"> 

  

Example 1: In this example, we will create a condensed table in Bootstrap 3 using a table-condensed class.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>Bootstrap Condensed Table</title>
    <meta name="viewport" content=
        "width = device-width, initial-scale = 1">
 
    <!-- Include Bootstrap 3 and jQuery CDNs -->
    <link href=
        rel="stylesheet">
    <script src=
    </script>
    <script src=
    </script>
</head>
 
<body>
 
    <!-- Include .table-condensed class after
        .table class in table tag-->
    <table class="table table-condensed">
        <thead>
            <tr>
                <th>ID</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Email</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>Iron</td>
                <td>Man</td>
                <td>ironman@mail.com</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Captain</td>
                <td>America</td>
                <td>captainamerica@mail.com</td>
            </tr>
            <tr>
                <td>3</td>
                <td>Doctor</td>
                <td>Strange</td>
                <td>doctorstrange@mail.com</td>
            </tr>
            <tr>
                <td>4</td>
                <td>Black</td>
                <td>Widow</td>
                <td>blackwidow@mail.com</td>
            </tr>
        </tbody>
    </table>
</body>
 
</html>


Output:

Example 2: In this example, we will create a condensed table in Bootstrap 4 using a table-sm class.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>Bootstrap Condensed Table</title>
    <meta name="viewport" content=
        "width = device-width, initial-scale = 1">
 
    <!-- Include Bootstrap 4 and jQuery CDNs -->
    <link href=
        rel="stylesheet">
    <script src=
    </script>
    <script src=
    </script>
</head>
 
<body>
    <!-- Include .table-sm class after
        .table class in table tag-->
    <table class="table table-sm">
        <thead>
            <tr>
                <th>ID</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Email</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>Iron</td>
                <td>Man</td>
                <td>ironman@mail.com</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Captain</td>
                <td>America</td>
                <td>captainamerica@mail.com</td>
            </tr>
            <tr>
                <td>3</td>
                <td>Doctor</td>
                <td>Strange</td>
                <td>doctorstrange@mail.com</td>
            </tr>
            <tr>
                <td>4</td>
                <td>Black</td>
                <td>Widow</td>
                <td>blackwidow@mail.com</td>
            </tr>
        </tbody>
    </table>
</body>
 
</html>


Output:



Last Updated : 10 Oct, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads