Use main scrollbar to scroll all elements in the page

Stack Overflow Asked by Marsilinou Zaky on December 22, 2021

<html>
<head>
    <style>
        html {
            overflow: scroll;
        }

        table {
            width: 500px;
            display: block;
            background: gray;
            margin: 0 auto;
        }

        tbody {
            overflow: auto;
        }

        td {
            padding: 50px;
        }

    </style>
</head>
<body>
<table id="results_body">
    <tbody class="content" style="display: block;">
    <tr>
        <th>HEADER</th>
        <th>HEADER</th>
        <th>HEADER</th>
        <th>HEADER</th>
        <th>HEADER</th>
        <th>HEADER</th>
        <th>HEADER</th>
        <th>HEADER</th>
    </tr>
    <tr>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
    </tr>
    <tr>


        <td>2</td>
        <td>2</td>
        <td>2</td>
        <td>2</td>
        <td>2</td>
        <td>2</td>
        <td>2</td>
        <td>2</td>
    </tr>
    <tr>


        <td>3</td>
        <td>3</td>
        <td>3</td>
        <td>3</td>
        <td>3</td>
        <td>3</td>
        <td>3</td>
        <td>3</td>
    </tr>
    <tr>


        <td>4</td>
        <td>4</td>
        <td>4</td>
        <td>4</td>
        <td>4</td>
        <td>4</td>
        <td>4</td>
        <td>4</td>
    </tr>
    <tr>


        <td>5</td>
        <td>5</td>
        <td>5</td>
        <td>5</td>
        <td>5</td>
        <td>5</td>
        <td>5</td>
        <td>5</td>
    </tr>
    <tr>


        <td>6</td>
        <td>6</td>
        <td>6</td>
        <td>6</td>
        <td>6</td>
        <td>6</td>
        <td>6</td>
        <td>6</td>
    </tr>
    <tr>


        <td>7</td>
        <td>7</td>
        <td>7</td>
        <td>7</td>
        <td>7</td>
        <td>7</td>
        <td>7</td>
        <td>7</td>
    </tr>
    </tbody>
</table>
</body>
</html>

The issue when the table’s horizontal scrollbar is not in view (as shown in the sc attached) it’s inconvenient to scroll the table. What I want to achieve is to allow the user to use the main scrollbar (body scrollbar) to scroll every thing in the page including the tables or keep the horizontal scroll bar in the view, it’s kinda tricky since I will have many tbody and I can’t wrap them in div.

Thank you in advanced

css frontend html javascript jquery

One Answer

Do not set the scrollbar in the table. Set it in the html body.

body {
            overflow: auto;
        }

Answered by Charlie on December 22, 2021

Add your own answers!

Ask a Question

Get help from others!