What is a Condensed Table in Bootstrap ?

Last Updated : 30 Jul, 2024

A condensed table in Bootstrap is a type of table that is styled to reduce the padding within table cells, making the table more compact and suitable for displaying a larger amount of data in a smaller space. This is useful for improving readability and making better use of screen real estate, especially on smaller devices or when dealing with large datasets.

In Bootstrap 5, using <table class="table table-striped table-hover"> creates a table with alternating row colors for improved readability (table-striped) and highlights rows when hovered over (table-hover). This enhances user interaction and data visibility.

Syntax:

For Bootstrap 5

<table class="table table-striped table-hover">

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

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Enhanced Bootstrap Table</title>
    <!-- Include Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Custom CSS -->
    <style>
        body {
            background-color: #f8f9fa;
            padding: 20px;
        }
        .table-container {
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
            padding: 20px;
        }
        .table {
            margin-bottom: 0;
        }
        .table thead th {
            background-color: #007bff;
            color: white;
            border-color: #007bff;
        }
        .table-hover tbody tr:hover {
            background-color: #f1f8ff;
        }
    </style>
</head>
<body>
    <div class="container">
        <h2 class="text-center mb-4">Avengers Contact List</h2>
        <div class="table-container">
            <table class="table table-striped table-hover">
                <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>[email protected]</td>
                    </tr>
                    <tr>
                        <td>2</td>
                        <td>Captain</td>
                        <td>America</td>
                        <td>[email protected]</td>
                    </tr>
                    <tr>
                        <td>3</td>
                        <td>Doctor</td>
                        <td>Strange</td>
                        <td>[email protected]</td>
                    </tr>
                    <tr>
                        <td>4</td>
                        <td>Black</td>
                        <td>Widow</td>
                        <td>[email protected]</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

    <!-- Include Bootstrap 5 JS and Popper.js -->
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
</body>
</html>

Output:

What is Contextual classes of table in Bootstrap ?

vrushaket

Improve

Article Tags :

What is a Condensed Table in Bootstrap ?

Similar Reads

Thank You!

What kind of Experience do you want to share?