How Can I Create a Fixed Header Table with Both Horizontal and Vertical Scrollbars Using JavaScript?-CSS Tutorial-php.cn

How Can I Create a Fixed Header Table with Both Horizontal and Vertical Scrollbars Using JavaScript?

Susan Sarandon

Release： 2024-12-01 11:46:14

Original

813 people have browsed it

How Can I Create a Fixed Header Table with Both Horizontal and Vertical Scrollbars Using JavaScript?

Fixed header table with horizontal scrollbar and vertical scrollbar on outer container

There is no simple HTML/CSS solution for creating a fixed header table with both horizontal and vertical scrollbars on the outer container. One possible solution is to use JavaScript to manually synchronize the scrolling of the header and body sections of the table.

Here is an example of how this could be achieved using jQuery:

<!DOCTYPE html>
<html>
<head>
    <title>Fixed header table with horizontal scrollbar and vertical scrollbar on outer container</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            height: 100%;
            width: 100%;
        }
        table {
            border-collapse: collapse;
            width: 100%;
        }
        tr {
            width: 100%;
        }
        .outer-container {
            background-color: #ccc;
            position: absolute;
            top: 0;
            left: 0;
            right: 300px;
            bottom: 40px;
            overflow: hidden;
        }
        .inner-container {
            height: 100%;
            overflow: hidden;
        }
        .table-header {
            position: relative;
            width: 100%;
        }
        .table-body {
            overflow: auto;
            height: calc(100% - 40px);
        }
        .header-cell {
            background-color: yellow;
            text-align: left;
            height: 40px;
        }
        .body-cell {
            background-color: blue;
            text-align: left;
        }
        .col1, .col3, .col4, .col5 {
            width: 120px;
            min-width: 120px;
        }
        .col2 {
            min-width: 300px;
        }
    </style>
</head>

<body>
    <div class="outer-container">
        <div class="inner-container">
            <div class="table-header">
                <table>

Copy after login

The above is the detailed content of How Can I Create a Fixed Header Table with Both Horizontal and Vertical Scrollbars Using JavaScript?. For more information, please follow other related articles on the PHP Chinese website!