How to Make Tables Scrollable in CSS

Author:

Introduction

When working with large tables, making the table scrollable helps keep the data organized and easy to view, especially when dealing with a lot of rows or columns. In this tutorial, you’ll learn how to make a table scrollable using CSS while maintaining a clean and readable design.

Development Steps

  1. Create Basic HTML Table Structure: Set up a simple table with column headers and data rows.
  2. Style the Table and Make it Scrollable: Use CSS to make the table scrollable when its content exceeds a certain height or width.
  3. Add Optional Fixed Header: Make the header stay in place while the table content scrolls.

Step 1: Create a Basic HTML Table Structure

We’ll start by creating a simple HTML table structure with headers and data rows.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Scrollable Table</title>
</head>
<body>

    <!-- Step 1: Basic table structure -->
    <div class="table-container">
        <table class="scrollable-table">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Age</th>
                    <th>City</th>
                    <th>Email</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Ananya</td>
                    <td>25</td>
                    <td>Delhi</td>
                    <td>ananya@example.com</td>
                </tr>
                <tr>
                    <td>Rohan</td>
                    <td>30</td>
                    <td>Mumbai</td>
                    <td>rohan@example.com</td>
                </tr>
                <tr>
                    <td>Meera</td>
                    <td>22</td>
                    <td>Bangalore</td>
                    <td>meera@example.com</td>
                </tr>
                <tr>
                    <td>Vikram</td>
                    <td>35</td>
                    <td>Pune</td>
                    <td>vikram@example.com</td>
                </tr>
                <tr>
                    <td>Kiran</td>
                    <td>28</td>
                    <td>Hyderabad</td>
                    <td>kiran@example.com</td>
                </tr>
                <!-- Additional rows for scroll demonstration -->
                <tr>
                    <td>Rahul</td>
                    <td>32</td>
                    <td>Chennai</td>
                    <td>rahul@example.com</td>
                </tr>
                <tr>
                    <td>Aditi</td>
                    <td>26</td>
                    <td>Kolkata</td>
                    <td>aditi@example.com</td>
                </tr>
            </tbody>
        </table>
    </div>

</body>
</html>

Explanation:

  • This table has a thead for column headers (Name, Age, City, Email) and several rows of data in the tbody.
  • We’ll now use CSS to make the table scrollable.

Step 2: Style the Table and Make it Scrollable with CSS

Now, we’ll apply CSS to make the table scrollable by limiting the height of the table container and adding scroll bars for overflow.

<head>
    <style>
        /* General body styles */
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }

        .table-container {
            width: 80%;
            max-height: 300px; /* Limit height for scrollable content */
            overflow-y: auto;   /* Enable vertical scrolling */
            margin: 20px;
            background-color: white;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            border-radius: 8px;
        }

        /* Step 2: Style the table */
        table {
            width: 100%;
            border-collapse: collapse;
        }

        th, td {
            padding: 12px 15px;
            text-align: left;
            border-bottom: 1px solid #ddd;
        }

        th {
            background-color: #3498db;
            color: white;
            text-transform: uppercase;
            letter-spacing: 0.1em;
        }

        tbody tr:nth-child(even) {
            background-color: #f2f2f2;
        }
    </style>
</head>

Explanation:

  • Scrollable Table: The max-height: 300px property sets the maximum height of the .table-container to 300px, and the overflow-y: auto property allows vertical scrolling when the content exceeds the container’s height.
  • Basic Table Styling: The table cells (th and td) are styled with padding, borders, and zebra stripes for better readability.

Step 3: Add Horizontal Scrolling (Optional)

If your table has many columns, you can also make it horizontally scrollable by adding overflow-x: auto to the table container.

<head>
    <style>
        /* General body styles */
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }

        .table-container {
            width: 80%;
            max-height: 300px; /* Limit height for scrollable content */
            overflow-y: auto;   /* Enable vertical scrolling */
            overflow-x: auto;   /* Enable horizontal scrolling (optional) */
            margin: 20px;
            background-color: white;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            border-radius: 8px;
        }

        /* Style the table */
        table {
            width: 100%;
            border-collapse: collapse;
        }

        th, td {
            padding: 12px 15px;
            text-align: left;
            border-bottom: 1px solid #ddd;
        }

        th {
            background-color: #3498db;
            color: white;
            text-transform: uppercase;
            letter-spacing: 0.1em;
        }

        tbody tr:nth-child(even) {
            background-color: #f2f2f2;
        }
    </style>
</head>

Explanation:

  • Horizontal Scrolling: The overflow-x: auto property enables horizontal scrolling, making it useful for tables with many columns that don’t fit within the screen’s width.

Step 4: Make the Table Header Fixed (Optional)

To make the header stay in place while scrolling the table, we can fix the header using position: sticky and top: 0.

<head>
    <style>
        /* General body styles */
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }

        .table-container {
            width: 80%;
            max-height: 300px; /* Limit height for scrollable content */
            overflow-y: auto;   /* Enable vertical scrolling */
            overflow-x: auto;   /* Enable horizontal scrolling (optional) */
            margin: 20px;
            background-color: white;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            border-radius: 8px;
        }

        /* Style the table */
        table {
            width: 100%;
            border-collapse: collapse;
        }

        th, td {
            padding: 12px 15px;
            text-align: left;
            border-bottom: 1px solid #ddd;
        }

        th {
            background-color: #3498db;
            color: white;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            position: sticky;  /* Fix header */
            top: 0;            /* Stick header to top */
            z-index: 1;        /* Ensure header stays above other rows */
        }

        tbody tr:nth-child(even) {
            background-color: #f2f2f2;
        }
    </style>
</head>

Explanation:

  • Fixed Header: The position: sticky and top: 0 properties make the header stick to the top when the table is scrolled. The z-index: 1 ensures that the header stays on top of the content when scrolling.

Complete Example

Here’s the complete HTML and CSS code for making a scrollable table with an optional fixed header:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Scrollable Table</title>
    <style>
        /* General body styles */
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
           

 display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }

        .table-container {
            width: 80%;
            max-height: 300px; /* Limit height for scrollable content */
            overflow-y: auto;   /* Enable vertical scrolling */
            overflow-x: auto;   /* Enable horizontal scrolling (optional) */
            margin: 20px;
            background-color: white;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            border-radius: 8px;
        }

        /* Style the table */
        table {
            width: 100%;
            border-collapse: collapse;
        }

        th, td {
            padding: 12px 15px;
            text-align: left;
            border-bottom: 1px solid #ddd;
        }

        th {
            background-color: #3498db;
            color: white;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            position: sticky;  /* Fix header */
            top: 0;            /* Stick header to top */
            z-index: 1;        /* Ensure header stays above other rows */
        }

        tbody tr:nth-child(even) {
            background-color: #f2f2f2;
        }
    </style>
</head>
<body>

    <!-- Step 1: Basic table structure -->
    <div class="table-container">
        <table class="scrollable-table">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Age</th>
                    <th>City</th>
                    <th>Email</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Ananya</td>
                    <td>25</td>
                    <td>Delhi</td>
                    <td>ananya@example.com</td>
                </tr>
                <tr>
                    <td>Rohan</td>
                    <td>30</td>
                    <td>Mumbai</td>
                    <td>rohan@example.com</td>
                </tr>
                <tr>
                    <td>Meera</td>
                    <td>22</td>
                    <td>Bangalore</td>
                    <td>meera@example.com</td>
                </tr>
                <tr>
                    <td>Vikram</td>
                    <td>35</td>
                    <td>Pune</td>
                    <td>vikram@example.com</td>
                </tr>
                <tr>
                    <td>Kiran</td>
                    <td>28</td>
                    <td>Hyderabad</td>
                    <td>kiran@example.com</td>
                </tr>
                <tr>
                    <td>Rahul</td>
                    <td>32</td>
                    <td>Chennai</td>
                    <td>rahul@example.com</td>
                </tr>
                <tr>
                    <td>Aditi</td>
                    <td>26</td>
                    <td>Kolkata</td>
                    <td>aditi@example.com</td>
                </tr>
            </tbody>
        </table>
    </div>

</body>
</html>

Output

You can play with the above HTML in Online HTML Editor and Compiler. Here is the output of the above HTML page.:

Conclusion

In this tutorial, you learned how to make a table scrollable using CSS. By setting a maximum height and using overflow-y: auto, you can enable vertical scrolling for tables with a lot of rows. Additionally, we covered how to make the header fixed using position: sticky and ensure horizontal scrolling for tables with many columns using overflow-x: auto. These techniques improve the user experience, especially when dealing with large datasets.

Comments

Post a Comment

Leave Comment