Html Question posted in
Some basic documentation can be found here.

Html – Table with sticky transparent background headers

I have a table that has a transparent header row

I want the header row to be sticky but when I do that when I scroll vertically the table the other table rows are scrolling behind the header and since it is transparent, it is shown.
table
behind the header

I tried making only the <tbody> element scrollable but that makes things difficult since the scrollbar now pushes the tbody to the left when it appears leaving the tbody not horizontally aligned with the <thead>

table {
    width: 100%;
    border-collapse: collapse;
}

th, td {
    border: 1px solid #ccc;
    padding: 8px;
    text-align: left;
}

td {
  background-color: brown;
}

.sticky-header {
    position: sticky;
    top: 0;
    background-color: transparent;
}
 <table>
            <thead>
                <tr class="sticky-header">
                    <th>Header 1</th>
                    <th>Header 2</th>
                    <th>Header 3</th>
                </tr>
            </thead>
<tbody>
                <tr><td>Row 1, Col 1</td><td>Row 1, Col 2</td><td>Row 1, Col 3</td></tr>
                <tr><td>Row 2, Col 1</td><td>Row 2, Col 2</td><td>Row 2, Col 3</td></tr>
                <tr><td>Row 3, Col 1</td><td>Row 3, Col 2</td><td>Row 3, Col 3</td></tr>
                <tr><td>Row 4, Col 1</td><td>Row 4, Col 2</td><td>Row 4, Col 3</td></tr>
                <tr><td>Row 5, Col 1</td><td>Row 5, Col 2</td><td>Row 5, Col 3</td></tr>
                <tr><td>Row 6, Col 1</td><td>Row 6, Col 2</td><td>Row 6, Col 3</td></tr>
                <tr><td>Row 7, Col 1</td><td>Row 7, Col 2</td><td>Row 7, Col 3</td></tr>
                <tr><td>Row 8, Col 1</td><td>Row 8, Col 2</td><td>Row 8, Col 3</td></tr>
                <tr><td>Row 9, Col 1</td><td>Row 9, Col 2</td><td>Row 9, Col 3</td></tr>
            </tbody>
        </table>
Tags:

2

Answers


  1. 0 
    th, td {
    border: 1px solid #ccc;
    padding: 8px;
    text-align: left;
}

td {
  background-color: brown;
}
table{
    border-collapse: collapse;
    overflow: scroll;
    }
thead{
    position: sticky;
    position: -webkit-sticky;
    z-index: 9;
    top: 0;
    left: 0;
    background-color: transparent;
    backdrop-filter: blur(5px);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
table {
    width: 100%;
    border-collapse: collapse;
}

th, td {
    border: 1px solid #ccc;
    padding: 8px;
    text-align: left;
}

td {
  background-color: brown;
}

.sticky-header {
    position: sticky;
    top: 0;
    background-color: transparent;
}
     <table>
        <thead>
            <tr class="sticky-header">
                <th>Header 1</th>
                <th>Header 2</th>
                <th>Header 3</th>
            </tr>
        </thead>
    <tbody>
            <tr><td>Row 1, Col 1</td><td>Row 1, Col 2</td><td>Row 1, Col 3</td></tr>
            <tr><td>Row 2, Col 1</td><td>Row 2, Col 2</td><td>Row 2, Col 3</td></tr>
            <tr><td>Row 3, Col 1</td><td>Row 3, Col 2</td><td>Row 3, Col 3</td></tr>
            <tr><td>Row 4, Col 1</td><td>Row 4, Col 2</td><td>Row 4, Col 3</td></tr>
            <tr><td>Row 5, Col 1</td><td>Row 5, Col 2</td><td>Row 5, Col 3</td></tr>
            <tr><td>Row 6, Col 1</td><td>Row 6, Col 2</td><td>Row 6, Col 3</td></tr>
            <tr><td>Row 7, Col 1</td><td>Row 7, Col 2</td><td>Row 7, Col 3</td></tr>
            <tr><td>Row 8, Col 1</td><td>Row 8, Col 2</td><td>Row 8, Col 3</td></tr>
            <tr><td>Row 9, Col 1</td><td>Row 9, Col 2</td><td>Row 9, Col 3</td></tr>
        </tbody>
    </table>
</body>

    I’ll use the z-index with the top and left 0 with position sticky
    and when it scrolls I’ll blur the background. I think that might help you

    Login or Signup to reply.
  2. 0

    You could try this below code:

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sticky Header Table Example</title>
    <style>
        /* Basic table styling */
        table {
            width: 100%;
            border-collapse: collapse;
        }

        th, td {
            border: 1px solid #ccc;
            padding: 8px;
            text-align: center;
        }

        /* Styling for the table rows */
        td {
            background-color: brown;
            color: white;
        }

        /* Sticky header styling */
        .sticky-header {
            position: sticky;
            top: 0;
            background-color: rgba(255, 255, 255, 0.9); /* Semi-transparent white */
            color: black; /* Text color for visibility */
            z-index: 1; /* Ensure it stays above the rows */
            text-align: center;
        }
    </style>
</head>
<body>
    <table>
        <thead>
            <tr class="sticky-header">
                <th>Header 1</th>
                <th>Header 2</th>
                <th>Header 3</th>
            </tr>
        </thead>
        <tbody>
            <tr><td>Row 1, Col 1</td><td>Row 1, Col 2</td><td>Row 1, Col 3</td></tr>
            <tr><td>Row 2, Col 1</td><td>Row 2, Col 2</td><td>Row 2, Col 3</td></tr>
            <tr><td>Row 3, Col 1</td><td>Row 3, Col 2</td><td>Row 3, Col 3</td></tr>
            <tr><td>Row 4, Col 1</td><td>Row 4, Col 2</td><td>Row 4, Col 3</td></tr>
            <tr><td>Row 5, Col 1</td><td>Row 5, Col 2</td><td>Row 5, Col 3</td></tr>
            <tr><td>Row 6, Col 1</td><td>Row 6, Col 2</td><td>Row 6, Col 3</td></tr>
            <tr><td>Row 7, Col 1</td><td>Row 7, Col 2</td><td>Row 7, Col 3</td></tr>
            <tr><td>Row 8, Col 1</td><td>Row 8, Col 2</td><td>Row 8, Col 3</td></tr>
            <tr><td>Row 9, Col 1</td><td>Row 9, Col 2</td><td>Row 9, Col 3</td></tr>
            <tr><td>Row 10, Col 1</td><td>Row 10, Col 2</td><td>Row 10, Col 3</td></tr>
            <tr><td>Row 11, Col 1</td><td>Row 11, Col 2</td><td>Row 11, Col 3</td></tr>
            <tr><td>Row 12, Col 1</td><td>Row 12, Col 2</td><td>Row 12, Col 3</td></tr>
        </tbody>
    </table>
</body>
</html>

    z-index: 1; position: sticky; this will help the header to remains sticky at the top when scrolling and other part of the table you can scroll.

    enter image description here

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search