0
<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. enter image description here Thank you in advanced

Marsilinou Zaky
  • 1,038
  • 7
  • 17

1 Answers1

0

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

body {
            overflow: auto;
        }
Charlie
  • 22,886
  • 11
  • 59
  • 90
  • If I remove the `overflow:auto` from the `tbody` then the content will over flow on the page and won't be limited to only the table with. – Marsilinou Zaky Jul 24 '20 at 04:11
  • See here for proper styling of table cells to show content right within https://stackoverflow.com/questions/39366433/how-to-make-table-cell-expand-based-on-content – Charlie Jul 24 '20 at 04:36
  • That's not what I'm trying to achieve, what I'm saying that let's say I have three different `tbody` that can be scrolled horizontally, I want to use the main html scroll bar to scroll all 3 `tbody` at once – Marsilinou Zaky Jul 24 '20 at 19:36