Sticky table header inside overflow-x div with 100% width

Question

I just can’t get a sticky table header inside an overflow-x: auto div to work.

The goal is to have a table with many columns that is contained within the div (100% div) yet be able to scroll the overflow horizontally, with the table’s header fixed to the top of the page when scrolling passed it vertically.

<div style=“overflow-x: auto”>
    <table class=“table”>
        <thead class=“sticky”>
            <tr>
                <td>Col 1</td>
                <td>Col 2</td>
                ...
            </tr>
         </thead>
    </table>
</div>

I can only get to either:

1. Have the sticky header with rows overflowing on the right
2. Or fit the overflow inside the div containing the table but without a a fixed header on the top when scrolling passed the table’s header!

The table itself is using Bootstrap ‘table’ class.

There’s got to be a way to accomplish this, it just seems that whenever I add the overflow-x to take care of the horizontal overflow of the table, the stickiness of the table’s header is obliterated.

Sticky header class alone works in thead, and the header gets fixed on top of the page once it scrolls passed the table.

sticky tr > th {
    position: sticky;
    top: 0;
}

Why is it that when I add the ‘overflow-x: auto’ style in the div containing the table with a sticky table header, it makes the header not sticky?

And how can I accomplish this?

Edit: here's a Fiddle.

Currently the overflow-x handles the table's overflow, hiding it after the container's width (100%), but if you scroll passed the header, nothing happens. Commenting out line 37, overflow-x: auto; on the d1 class, you achieve the desired sticky header once scrolling down the page, but now the table extends passed the width of the container.

How can I have both? Hiding the table's overflow but still having the header sticky to the top of the page once scrolling down the page?

Disastrous

did you mean position:sticky; ? fixed has another purpose. #37072035 here a working example : codepen.io/gc-nomade/pen/vaNoEQ – Lustrous

Sorry, yes, I meant sticky. Wrote it all on the phone, so it was a pain and was thinking “fixed” header but my class does reflect sticky. – Disastrous

@G-Cyrillus, I edited the post with a Fiddle, taking your working example and modifying it a bit to help clarify what I am trying to accomplish: jsfiddle.net/bretonics/j3s9nkae/15. Can you help? Thank you! – Disastrous

.d1{max-height:100%;} requires an height on its parent to be calcukated, else it is 100% of null. try 100vh or 100px and see it working. You also set an height on body, then use bootstrap classes : jsfiddle.net/ue5j6zkb – Lustrous

Have you found a solution? – Eparch

Answer 1

Maybe I have missed what you are trying to do exactly, but the code below satisfies the following requirements:

• a table with a "column header" and a "row header"
• the row header is sticky as long as the table is in view
• the column header is sticky as long as the table is in view
• x and y scrolling work together with the row and column headers
  correctly positioned relative to the rows and columns
• when the table scrolls out of view altogether, the sticky headers
  also go
• no javascript, just basic CSS

Sorry, but I did not really follow what your snippet/fiddle was trying to do, with z indexes, etc., and the multiple HTML levels.

The key in the code below is to match the appropriate sticky element with the appropriate scroll container.

The column header sticky belongs to the table scroll container, ie, the first tr in table sticks vertically in the table.

The row header is not one element. It is a sticky td in each row, ie, the first td in each row sticks horizontally in each tr.

table {
    overflow-y: auto;
}

tr:nth-of-type(1) {
    position: sticky;
    top: 5px;
    background: cyan;
}

tr:not(:nth-of-type(1)) {
    overlflow-x: auto;
}

td:nth-of-type(1) {
    position: sticky;
    left: 5px;
    background: cyan;
}

<p>Some text before</p>
<p>Some text before</p>
<p>Some text before</p>
<p>Some text before</p>
<p>Some text before</p>
<p>Some text before</p>
<p>Some text before</p>
<p>Some text before</p>
<p>Some text before</p>
<p>Some text before</p>
<p>Some text before</p>
<p>Some text before</p>
<p>Some text before</p>
<p>Some text before</p>
<p>Some text before</p>
<p>Some text before</p>
<p>Some text before</p>
<p>Some text before</p>
<p>Some text before</p>
<p>Some text before</p>
<p>Some text before</p>
<p>Some text before</p>
<p>Some text before</p>
<p>Some text before</p>
<p>Some text before</p>
<p>Some text before</p>
<p>Some text before</p>
<div>
<table>
<tr><th></th><th>Col 1</th><th>Col 2</th><th>Col 3</th><th>Col 4</th><th>Col 5</th><th>Col 6</th><th>Col 7</th><th>Col 8</th><th>Col 9</th><th>Col 10</th><th>Col 11</th><th>Col 12</th><th>Col 13</th><th>Col 14</th><th>Col 15</th><th>Col 16</th><th>Col 17</th><th>Col 18</th><th>Col 19</th><th>Col 20</th><th>Col 21</th><th>Col 22</th><th>Col 23</th><th>Col 24</th><th>Col 25</th><th>Col 26</th><th>Col 27</th><th>Col 28</th><th>Col 29</th><th>Col 30</th></tr>
<tr><td>Row 1</td><td>Lorem</td><td>ipsum</td><td>dolor</td><td>sit</td><td>amet,</td><td>consectetur</td><td>adipiscing</td><td>elit,</td><td>sed</td><td>do</td><td>eiusmod</td><td>tempor</td><td>incididunt</td><td>ut</td><td>labore</td><td>et</td><td>dolore</td><td>magna</td><td>aliqua.</td><td>Ut</td><td>enim</td><td>ad</td><td>minim</td><td>veniam,</td><td>quis</td><td>nostrud</td><td>exercitation</td><td>ullamco</td><td>laboris</td><td>nisi</td></tr>
<tr><td>Row 2</td><td>ut</td><td>aliquip</td><td>ex</td><td>ea</td><td>commodo</td><td>consequat.</td><td>Duis</td><td>aute</td><td>irure</td><td>dolor</td><td>in</td><td>reprehenderit</td><td>in</td><td>voluptate</td><td>velit</td><td>esse</td><td>cillum</td><td>dolore</td><td>eu</td><td>fugiat</td><td>nulla</td><td>pariatur.</td><td>Excepteur</td><td>sint</td><td>occaecat</td><td>cupidatat</td><td>non</td><td>proident,</td><td>sunt</td><td>in</td></tr>
<tr><td>Row 3</td><td>culpa</td><td>qui</td><td>officia</td><td>deserunt</td><td>mollit</td><td>anim</td><td>id</td><td>est</td><td>laborum</td><td>Lorem</td><td>ipsum</td><td>dolor</td><td>sit</td><td>amet,</td><td>consectetur</td><td>adipiscing</td><td>elit,</td><td>sed</td><td>do</td><td>eiusmod</td><td>tempor</td><td>incididunt</td><td>ut</td><td>labore</td><td>et</td><td>dolore</td><td>magna</td><td>aliqua.</td><td>Ut</td><td>enim</td></tr>
<tr><td>Row 4</td><td>ad</td><td>minim</td><td>veniam,</td><td>quis</td><td>nostrud</td><td>exercitation</td><td>ullamco</td><td>laboris</td><td>nisi</td><td>ut</td><td>aliquip</td><td>ex</td><td>ea</td><td>commodo</td><td>consequat.</td><td>Duis</td><td>aute</td><td>irure</td><td>dolor</td><td>in</td><td>reprehenderit</td><td>in</td><td>voluptate</td><td>velit</td><td>esse</td><td>cillum</td><td>dolore</td><td>eu</td><td>fugiat</td><td>nulla</td></tr>
<tr><td>Row 5</td><td>pariatur.</td><td>Excepteur</td><td>sint</td><td>occaecat</td><td>cupidatat</td><td>non</td><td>proident,</td><td>sunt</td><td>in</td><td>culpa</td><td>qui</td><td>officia</td><td>deserunt</td><td>mollit</td><td>anim</td><td>id</td><td>est</td><td>laborum</td><td>Lorem</td><td>ipsum</td><td>dolor</td><td>sit</td><td>amet,</td><td>consectetur</td><td>adipiscing</td><td>elit,</td><td>sed</td><td>do</td><td>eiusmod</td><td>tempor</td></tr>
<tr><td>Row 6</td><td>incididunt</td><td>ut</td><td>labore</td><td>et</td><td>dolore</td><td>magna</td><td>aliqua.</td><td>Ut</td><td>enim</td><td>ad</td><td>minim</td><td>veniam,</td><td>quis</td><td>nostrud</td><td>exercitation</td><td>ullamco</td><td>laboris</td><td>nisi</td><td>ut</td><td>aliquip</td><td>ex</td><td>ea</td><td>commodo</td><td>consequat.</td><td>Duis</td><td>aute</td><td>irure</td><td>dolor</td><td>in</td><td>reprehenderit</td></tr>
<tr><td>Row 7</td><td>in</td><td>voluptate</td><td>velit</td><td>esse</td><td>cillum</td><td>dolore</td><td>eu</td><td>fugiat</td><td>nulla</td><td>pariatur.</td><td>Excepteur</td><td>sint</td><td>occaecat</td><td>cupidatat</td><td>non</td><td>proident,</td><td>sunt</td><td>in</td><td>culpa</td><td>qui</td><td>officia</td><td>deserunt</td><td>mollit</td><td>anim</td><td>id</td><td>est</td><td>laborum</td><td>Lorem</td><td>ipsum</td><td>dolor</td></tr>
<tr><td>Row 8</td><td>sit</td><td>amet,</td><td>consectetur</td><td>adipiscing</td><td>elit,</td><td>sed</td><td>do</td><td>eiusmod</td><td>tempor</td><td>incididunt</td><td>ut</td><td>labore</td><td>et</td><td>dolore</td><td>magna</td><td>aliqua.</td><td>Ut</td><td>enim</td><td>ad</td><td>minim</td><td>veniam,</td><td>quis</td><td>nostrud</td><td>exercitation</td><td>ullamco</td><td>laboris</td><td>nisi</td><td>ut</td><td>aliquip</td><td>ex</td></tr>
<tr><td>Row 9</td><td>ea</td><td>commodo</td><td>consequat.</td><td>Duis</td><td>aute</td><td>irure</td><td>dolor</td><td>in</td><td>reprehenderit</td><td>in</td><td>voluptate</td><td>velit</td><td>esse</td><td>cillum</td><td>dolore</td><td>eu</td><td>fugiat</td><td>nulla</td><td>pariatur.</td><td>Excepteur</td><td>sint</td><td>occaecat</td><td>cupidatat</td><td>non</td><td>proident,</td><td>sunt</td><td>in</td><td>culpa</td><td>qui</td><td>officia</td></tr>
<tr><td>Row 10</td><td>deserunt</td><td>mollit</td><td>anim</td><td>id</td><td>est</td><td>laborum</td><td>Lorem</td><td>ipsum</td><td>dolor</td><td>sit</td><td>amet,</td><td>consectetur</td><td>adipiscing</td><td>elit,</td><td>sed</td><td>do</td><td>eiusmod</td><td>tempor</td><td>incididunt</td><td>ut</td><td>labore</td><td>et</td><td>dolore</td><td>magna</td><td>aliqua.</td><td>Ut</td><td>enim</td><td>ad</td><td>minim</td><td>veniam,</td></tr>
<tr><td>Row 11</td><td>quis</td><td>nostrud</td><td>exercitation</td><td>ullamco</td><td>laboris</td><td>nisi</td><td>ut</td><td>aliquip</td><td>ex</td><td>ea</td><td>commodo</td><td>consequat.</td><td>Duis</td><td>aute</td><td>irure</td><td>dolor</td><td>in</td><td>reprehenderit</td><td>in</td><td>voluptate</td><td>velit</td><td>esse</td><td>cillum</td><td>dolore</td><td>eu</td><td>fugiat</td><td>nulla</td><td>pariatur.</td><td>Excepteur</td><td>sint</td></tr>
<tr><td>Row 12</td><td>occaecat</td><td>cupidatat</td><td>non</td><td>proident,</td><td>sunt</td><td>in</td><td>culpa</td><td>qui</td><td>officia</td><td>deserunt</td><td>mollit</td><td>anim</td><td>id</td><td>est</td><td>laborum</td><td>Lorem</td><td>ipsum</td><td>dolor</td><td>sit</td><td>amet,</td><td>consectetur</td><td>adipiscing</td><td>elit,</td><td>sed</td><td>do</td><td>eiusmod</td><td>tempor</td><td>incididunt</td><td>ut</td><td>labore</td></tr>
<tr><td>Row 13</td><td>et</td><td>dolore</td><td>magna</td><td>aliqua.</td><td>Ut</td><td>enim</td><td>ad</td><td>minim</td><td>veniam,</td><td>quis</td><td>nostrud</td><td>exercitation</td><td>ullamco</td><td>laboris</td><td>nisi</td><td>ut</td><td>aliquip</td><td>ex</td><td>ea</td><td>commodo</td><td>consequat.</td><td>Duis</td><td>aute</td><td>irure</td><td>dolor</td><td>in</td><td>reprehenderit</td><td>in</td><td>voluptate</td><td>velit</td></tr>
<tr><td>Row 14</td><td>esse</td><td>cillum</td><td>dolore</td><td>eu</td><td>fugiat</td><td>nulla</td><td>pariatur.</td><td>Excepteur</td><td>sint</td><td>occaecat</td><td>cupidatat</td><td>non</td><td>proident,</td><td>sunt</td><td>in</td><td>culpa</td><td>qui</td><td>officia</td><td>deserunt</td><td>mollit</td><td>anim</td><td>id</td><td>est</td><td>laborum</td><td>Lorem</td><td>ipsum</td><td>dolor</td><td>sit</td><td>amet,</td><td>consectetur</td></tr>
<tr><td>Row 15</td><td>adipiscing</td><td>elit,</td><td>sed</td><td>do</td><td>eiusmod</td><td>tempor</td><td>incididunt</td><td>ut</td><td>labore</td><td>et</td><td>dolore</td><td>magna</td><td>aliqua.</td><td>Ut</td><td>enim</td><td>ad</td><td>minim</td><td>veniam,</td><td>quis</td><td>nostrud</td><td>exercitation</td><td>ullamco</td><td>laboris</td><td>nisi</td><td>ut</td><td>aliquip</td><td>ex</td><td>ea</td><td>commodo</td><td>consequat.</td></tr>
<tr><td>Row 16</td><td>Duis</td><td>aute</td><td>irure</td><td>dolor</td><td>in</td><td>reprehenderit</td><td>in</td><td>voluptate</td><td>velit</td><td>esse</td><td>cillum</td><td>dolore</td><td>eu</td><td>fugiat</td><td>nulla</td><td>pariatur.</td><td>Excepteur</td><td>sint</td><td>occaecat</td><td>cupidatat</td><td>non</td><td>proident,</td><td>sunt</td><td>in</td><td>culpa</td><td>qui</td><td>officia</td><td>deserunt</td><td>mollit</td><td>anim</td></tr>
<tr><td>Row 17</td><td>Lorem</td><td>ipsum</td><td>dolor</td><td>sit</td><td>amet,</td><td>consectetur</td><td>adipiscing</td><td>elit,</td><td>sed</td><td>do</td><td>eiusmod</td><td>tempor</td><td>incididunt</td><td>ut</td><td>labore</td><td>et</td><td>dolore</td><td>magna</td><td>aliqua.</td><td>Ut</td><td>enim</td><td>ad</td><td>minim</td><td>veniam,</td><td>quis</td><td>nostrud</td><td>exercitation</td><td>ullamco</td><td>laboris</td><td>nisi</td></tr>
<tr><td>Row 18</td><td>ut</td><td>aliquip</td><td>ex</td><td>ea</td><td>commodo</td><td>consequat.</td><td>Duis</td><td>aute</td><td>irure</td><td>dolor</td><td>in</td><td>reprehenderit</td><td>in</td><td>voluptate</td><td>velit</td><td>esse</td><td>cillum</td><td>dolore</td><td>eu</td><td>fugiat</td><td>nulla</td><td>pariatur.</td><td>Excepteur</td><td>sint</td><td>occaecat</td><td>cupidatat</td><td>non</td><td>proident,</td><td>sunt</td><td>in</td></tr>
<tr><td>Row 19</td><td>culpa</td><td>qui</td><td>officia</td><td>deserunt</td><td>mollit</td><td>anim</td><td>id</td><td>est</td><td>laborum</td><td>Lorem</td><td>ipsum</td><td>dolor</td><td>sit</td><td>amet,</td><td>consectetur</td><td>adipiscing</td><td>elit,</td><td>sed</td><td>do</td><td>eiusmod</td><td>tempor</td><td>incididunt</td><td>ut</td><td>labore</td><td>et</td><td>dolore</td><td>magna</td><td>aliqua.</td><td>Ut</td><td>enim</td></tr>
<tr><td>Row 20</td><td>ad</td><td>minim</td><td>veniam,</td><td>quis</td><td>nostrud</td><td>exercitation</td><td>ullamco</td><td>laboris</td><td>nisi</td><td>ut</td><td>aliquip</td><td>ex</td><td>ea</td><td>commodo</td><td>consequat.</td><td>Duis</td><td>aute</td><td>irure</td><td>dolor</td><td>in</td><td>reprehenderit</td><td>in</td><td>voluptate</td><td>velit</td><td>esse</td><td>cillum</td><td>dolore</td><td>eu</td><td>fugiat</td><td>nulla</td></tr>
<tr><td>Row 21</td><td>pariatur.</td><td>Excepteur</td><td>sint</td><td>occaecat</td><td>cupidatat</td><td>non</td><td>proident,</td><td>sunt</td><td>in</td><td>culpa</td><td>qui</td><td>officia</td><td>deserunt</td><td>mollit</td><td>anim</td><td>id</td><td>est</td><td>laborum</td><td>Lorem</td><td>ipsum</td><td>dolor</td><td>sit</td><td>amet,</td><td>consectetur</td><td>adipiscing</td><td>elit,</td><td>sed</td><td>do</td><td>eiusmod</td><td>tempor</td></tr>
<tr><td>Row 22</td><td>incididunt</td><td>ut</td><td>labore</td><td>et</td><td>dolore</td><td>magna</td><td>aliqua.</td><td>Ut</td><td>enim</td><td>ad</td><td>minim</td><td>veniam,</td><td>quis</td><td>nostrud</td><td>exercitation</td><td>ullamco</td><td>laboris</td><td>nisi</td><td>ut</td><td>aliquip</td><td>ex</td><td>ea</td><td>commodo</td><td>consequat.</td><td>Duis</td><td>aute</td><td>irure</td><td>dolor</td><td>in</td><td>reprehenderit</td></tr>
<tr><td>Row 23</td><td>in</td><td>voluptate</td><td>velit</td><td>esse</td><td>cillum</td><td>dolore</td><td>eu</td><td>fugiat</td><td>nulla</td><td>pariatur.</td><td>Excepteur</td><td>sint</td><td>occaecat</td><td>cupidatat</td><td>non</td><td>proident,</td><td>sunt</td><td>in</td><td>culpa</td><td>qui</td><td>officia</td><td>deserunt</td><td>mollit</td><td>anim</td><td>id</td><td>est</td><td>laborum</td><td>Lorem</td><td>ipsum</td><td>dolor</td></tr>
<tr><td>Row 24</td><td>sit</td><td>amet,</td><td>consectetur</td><td>adipiscing</td><td>elit,</td><td>sed</td><td>do</td><td>eiusmod</td><td>tempor</td><td>incididunt</td><td>ut</td><td>labore</td><td>et</td><td>dolore</td><td>magna</td><td>aliqua.</td><td>Ut</td><td>enim</td><td>ad</td><td>minim</td><td>veniam,</td><td>quis</td><td>nostrud</td><td>exercitation</td><td>ullamco</td><td>laboris</td><td>nisi</td><td>ut</td><td>aliquip</td><td>ex</td></tr>
<tr><td>Row 25</td><td>ea</td><td>commodo</td><td>consequat.</td><td>Duis</td><td>aute</td><td>irure</td><td>dolor</td><td>in</td><td>reprehenderit</td><td>in</td><td>voluptate</td><td>velit</td><td>esse</td><td>cillum</td><td>dolore</td><td>eu</td><td>fugiat</td><td>nulla</td><td>pariatur.</td><td>Excepteur</td><td>sint</td><td>occaecat</td><td>cupidatat</td><td>non</td><td>proident,</td><td>sunt</td><td>in</td><td>culpa</td><td>qui</td><td>officia</td></tr>
<tr><td>Row 26</td><td>deserunt</td><td>mollit</td><td>anim</td><td>id</td><td>est</td><td>laborum</td><td>Lorem</td><td>ipsum</td><td>dolor</td><td>sit</td><td>amet,</td><td>consectetur</td><td>adipiscing</td><td>elit,</td><td>sed</td><td>do</td><td>eiusmod</td><td>tempor</td><td>incididunt</td><td>ut</td><td>labore</td><td>et</td><td>dolore</td><td>magna</td><td>aliqua.</td><td>Ut</td><td>enim</td><td>ad</td><td>minim</td><td>veniam,</td></tr>
<tr><td>Row 27</td><td>quis</td><td>nostrud</td><td>exercitation</td><td>ullamco</td><td>laboris</td><td>nisi</td><td>ut</td><td>aliquip</td><td>ex</td><td>ea</td><td>commodo</td><td>consequat.</td><td>Duis</td><td>aute</td><td>irure</td><td>dolor</td><td>in</td><td>reprehenderit</td><td>in</td><td>voluptate</td><td>velit</td><td>esse</td><td>cillum</td><td>dolore</td><td>eu</td><td>fugiat</td><td>nulla</td><td>pariatur.</td><td>Excepteur</td><td>sint</td></tr>
<tr><td>Row 28</td><td>occaecat</td><td>cupidatat</td><td>non</td><td>proident,</td><td>sunt</td><td>in</td><td>culpa</td><td>qui</td><td>officia</td><td>deserunt</td><td>mollit</td><td>anim</td><td>id</td><td>est</td><td>laborum</td><td>Lorem</td><td>ipsum</td><td>dolor</td><td>sit</td><td>amet,</td><td>consectetur</td><td>adipiscing</td><td>elit,</td><td>sed</td><td>do</td><td>eiusmod</td><td>tempor</td><td>incididunt</td><td>ut</td><td>labore</td></tr>
<tr><td>Row 29</td><td>et</td><td>dolore</td><td>magna</td><td>aliqua.</td><td>Ut</td><td>enim</td><td>ad</td><td>minim</td><td>veniam,</td><td>quis</td><td>nostrud</td><td>exercitation</td><td>ullamco</td><td>laboris</td><td>nisi</td><td>ut</td><td>aliquip</td><td>ex</td><td>ea</td><td>commodo</td><td>consequat.</td><td>Duis</td><td>aute</td><td>irure</td><td>dolor</td><td>in</td><td>reprehenderit</td><td>in</td><td>voluptate</td><td>velit</td></tr>
<tr><td>Row 30</td><td>esse</td><td>cillum</td><td>dolore</td><td>eu</td><td>fugiat</td><td>nulla</td><td>pariatur.</td><td>Excepteur</td><td>sint</td><td>occaecat</td><td>cupidatat</td><td>non</td><td>proident,</td><td>sunt</td><td>in</td><td>culpa</td><td>qui</td><td>officia</td><td>deserunt</td><td>mollit</td><td>anim</td><td>id</td><td>est</td><td>laborum</td><td>Lorem</td><td>ipsum</td><td>dolor</td><td>sit</td><td>amet,</td><td>consectetur</td></tr>
<tr><td>Row 31</td><td>adipiscing</td><td>elit,</td><td>sed</td><td>do</td><td>eiusmod</td><td>tempor</td><td>incididunt</td><td>ut</td><td>labore</td><td>et</td><td>dolore</td><td>magna</td><td>aliqua.</td><td>Ut</td><td>enim</td><td>ad</td><td>minim</td><td>veniam,</td><td>quis</td><td>nostrud</td><td>exercitation</td><td>ullamco</td><td>laboris</td><td>nisi</td><td>ut</td><td>aliquip</td><td>ex</td><td>ea</td><td>commodo</td><td>consequat.</td></tr>
<tr><td>Row 32</td><td>Duis</td><td>aute</td><td>irure</td><td>dolor</td><td>in</td><td>reprehenderit</td><td>in</td><td>voluptate</td><td>velit</td><td>esse</td><td>cillum</td><td>dolore</td><td>eu</td><td>fugiat</td><td>nulla</td><td>pariatur.</td><td>Excepteur</td><td>sint</td><td>occaecat</td><td>cupidatat</td><td>non</td><td>proident,</td><td>sunt</td><td>in</td><td>culpa</td><td>qui</td><td>officia</td><td>deserunt</td><td>mollit</td><td>anim</td></tr>
<tr><td>Row 33</td><td>Lorem</td><td>ipsum</td><td>dolor</td><td>sit</td><td>amet,</td><td>consectetur</td><td>adipiscing</td><td>elit,</td><td>sed</td><td>do</td><td>eiusmod</td><td>tempor</td><td>incididunt</td><td>ut</td><td>labore</td><td>et</td><td>dolore</td><td>magna</td><td>aliqua.</td><td>Ut</td><td>enim</td><td>ad</td><td>minim</td><td>veniam,</td><td>quis</td><td>nostrud</td><td>exercitation</td><td>ullamco</td><td>laboris</td><td>nisi</td></tr>
<tr><td>Row 34</td><td>ut</td><td>aliquip</td><td>ex</td><td>ea</td><td>commodo</td><td>consequat.</td><td>Duis</td><td>aute</td><td>irure</td><td>dolor</td><td>in</td><td>reprehenderit</td><td>in</td><td>voluptate</td><td>velit</td><td>esse</td><td>cillum</td><td>dolore</td><td>eu</td><td>fugiat</td><td>nulla</td><td>pariatur.</td><td>Excepteur</td><td>sint</td><td>occaecat</td><td>cupidatat</td><td>non</td><td>proident,</td><td>sunt</td><td>in</td></tr>
<tr><td>Row 35</td><td>culpa</td><td>qui</td><td>officia</td><td>deserunt</td><td>mollit</td><td>anim</td><td>id</td><td>est</td><td>laborum</td><td>Lorem</td><td>ipsum</td><td>dolor</td><td>sit</td><td>amet,</td><td>consectetur</td><td>adipiscing</td><td>elit,</td><td>sed</td><td>do</td><td>eiusmod</td><td>tempor</td><td>incididunt</td><td>ut</td><td>labore</td><td>et</td><td>dolore</td><td>magna</td><td>aliqua.</td><td>Ut</td><td>enim</td></tr>
<tr><td>Row 36</td><td>ad</td><td>minim</td><td>veniam,</td><td>quis</td><td>nostrud</td><td>exercitation</td><td>ullamco</td><td>laboris</td><td>nisi</td><td>ut</td><td>aliquip</td><td>ex</td><td>ea</td><td>commodo</td><td>consequat.</td><td>Duis</td><td>aute</td><td>irure</td><td>dolor</td><td>in</td><td>reprehenderit</td><td>in</td><td>voluptate</td><td>velit</td><td>esse</td><td>cillum</td><td>dolore</td><td>eu</td><td>fugiat</td><td>nulla</td></tr>
<tr><td>Row 37</td><td>pariatur.</td><td>Excepteur</td><td>sint</td><td>occaecat</td><td>cupidatat</td><td>non</td><td>proident,</td><td>sunt</td><td>in</td><td>culpa</td><td>qui</td><td>officia</td><td>deserunt</td><td>mollit</td><td>anim</td><td>id</td><td>est</td><td>laborum</td><td>Lorem</td><td>ipsum</td><td>dolor</td><td>sit</td><td>amet,</td><td>consectetur</td><td>adipiscing</td><td>elit,</td><td>sed</td><td>do</td><td>eiusmod</td><td>tempor</td></tr>
<tr><td>Row 38</td><td>incididunt</td><td>ut</td><td>labore</td><td>et</td><td>dolore</td><td>magna</td><td>aliqua.</td><td>Ut</td><td>enim</td><td>ad</td><td>minim</td><td>veniam,</td><td>quis</td><td>nostrud</td><td>exercitation</td><td>ullamco</td><td>laboris</td><td>nisi</td><td>ut</td><td>aliquip</td><td>ex</td><td>ea</td><td>commodo</td><td>consequat.</td><td>Duis</td><td>aute</td><td>irure</td><td>dolor</td><td>in</td><td>reprehenderit</td></tr>
<tr><td>Row 39</td><td>in</td><td>voluptate</td><td>velit</td><td>esse</td><td>cillum</td><td>dolore</td><td>eu</td><td>fugiat</td><td>nulla</td><td>pariatur.</td><td>Excepteur</td><td>sint</td><td>occaecat</td><td>cupidatat</td><td>non</td><td>proident,</td><td>sunt</td><td>in</td><td>culpa</td><td>qui</td><td>officia</td><td>deserunt</td><td>mollit</td><td>anim</td><td>id</td><td>est</td><td>laborum</td><td>Lorem</td><td>ipsum</td><td>dolor</td></tr>
<tr><td>Row 40</td><td>sit</td><td>amet,</td><td>consectetur</td><td>adipiscing</td><td>elit,</td><td>sed</td><td>do</td><td>eiusmod</td><td>tempor</td><td>incididunt</td><td>ut</td><td>labore</td><td>et</td><td>dolore</td><td>magna</td><td>aliqua.</td><td>Ut</td><td>enim</td><td>ad</td><td>minim</td><td>veniam,</td><td>quis</td><td>nostrud</td><td>exercitation</td><td>ullamco</td><td>laboris</td><td>nisi</td><td>ut</td><td>aliquip</td><td>ex</td></tr>
<tr><td>Row 41</td><td>ea</td><td>commodo</td><td>consequat.</td><td>Duis</td><td>aute</td><td>irure</td><td>dolor</td><td>in</td><td>reprehenderit</td><td>in</td><td>voluptate</td><td>velit</td><td>esse</td><td>cillum</td><td>dolore</td><td>eu</td><td>fugiat</td><td>nulla</td><td>pariatur.</td><td>Excepteur</td><td>sint</td><td>occaecat</td><td>cupidatat</td><td>non</td><td>proident,</td><td>sunt</td><td>in</td><td>culpa</td><td>qui</td><td>officia</td></tr>
<tr><td>Row 42</td><td>deserunt</td><td>mollit</td><td>anim</td><td>id</td><td>est</td><td>laborum</td><td>Lorem</td><td>ipsum</td><td>dolor</td><td>sit</td><td>amet,</td><td>consectetur</td><td>adipiscing</td><td>elit,</td><td>sed</td><td>do</td><td>eiusmod</td><td>tempor</td><td>incididunt</td><td>ut</td><td>labore</td><td>et</td><td>dolore</td><td>magna</td><td>aliqua.</td><td>Ut</td><td>enim</td><td>ad</td><td>minim</td><td>veniam,</td></tr>
<tr><td>Row 43</td><td>quis</td><td>nostrud</td><td>exercitation</td><td>ullamco</td><td>laboris</td><td>nisi</td><td>ut</td><td>aliquip</td><td>ex</td><td>ea</td><td>commodo</td><td>consequat.</td><td>Duis</td><td>aute</td><td>irure</td><td>dolor</td><td>in</td><td>reprehenderit</td><td>in</td><td>voluptate</td><td>velit</td><td>esse</td><td>cillum</td><td>dolore</td><td>eu</td><td>fugiat</td><td>nulla</td><td>pariatur.</td><td>Excepteur</td><td>sint</td></tr>
<tr><td>Row 44</td><td>occaecat</td><td>cupidatat</td><td>non</td><td>proident,</td><td>sunt</td><td>in</td><td>culpa</td><td>qui</td><td>officia</td><td>deserunt</td><td>mollit</td><td>anim</td><td>id</td><td>est</td><td>laborum</td><td>Lorem</td><td>ipsum</td><td>dolor</td><td>sit</td><td>amet,</td><td>consectetur</td><td>adipiscing</td><td>elit,</td><td>sed</td><td>do</td><td>eiusmod</td><td>tempor</td><td>incididunt</td><td>ut</td><td>labore</td></tr>
<tr><td>Row 45</td><td>et</td><td>dolore</td><td>magna</td><td>aliqua.</td><td>Ut</td><td>enim</td><td>ad</td><td>minim</td><td>veniam,</td><td>quis</td><td>nostrud</td><td>exercitation</td><td>ullamco</td><td>laboris</td><td>nisi</td><td>ut</td><td>aliquip</td><td>ex</td><td>ea</td><td>commodo</td><td>consequat.</td><td>Duis</td><td>aute</td><td>irure</td><td>dolor</td><td>in</td><td>reprehenderit</td><td>in</td><td>voluptate</td><td>velit</td></tr>
<tr><td>Row 46</td><td>esse</td><td>cillum</td><td>dolore</td><td>eu</td><td>fugiat</td><td>nulla</td><td>pariatur.</td><td>Excepteur</td><td>sint</td><td>occaecat</td><td>cupidatat</td><td>non</td><td>proident,</td><td>sunt</td><td>in</td><td>culpa</td><td>qui</td><td>officia</td><td>deserunt</td><td>mollit</td><td>anim</td><td>id</td><td>est</td><td>laborum</td><td>Lorem</td><td>ipsum</td><td>dolor</td><td>sit</td><td>amet,</td><td>consectetur</td></tr>
<tr><td>Row 47</td><td>adipiscing</td><td>elit,</td><td>sed</td><td>do</td><td>eiusmod</td><td>tempor</td><td>incididunt</td><td>ut</td><td>labore</td><td>et</td><td>dolore</td><td>magna</td><td>aliqua.</td><td>Ut</td><td>enim</td><td>ad</td><td>minim</td><td>veniam,</td><td>quis</td><td>nostrud</td><td>exercitation</td><td>ullamco</td><td>laboris</td><td>nisi</td><td>ut</td><td>aliquip</td><td>ex</td><td>ea</td><td>commodo</td><td>consequat.</td></tr>
<tr><td>Row 48</td><td>Duis</td><td>aute</td><td>irure</td><td>dolor</td><td>in</td><td>reprehenderit</td><td>in</td><td>voluptate</td><td>velit</td><td>esse</td><td>cillum</td><td>dolore</td><td>eu</td><td>fugiat</td><td>nulla</td><td>pariatur.</td><td>Excepteur</td><td>sint</td><td>occaecat</td><td>cupidatat</td><td>non</td><td>proident,</td><td>sunt</td><td>in</td><td>culpa</td><td>qui</td><td>officia</td><td>deserunt</td><td>mollit</td><td>anim</td></tr>
</table>
</div>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>

Carlton

Can you allow only a table horizontally scrollable? I mean, Some text before doesn't need to have space in its right side. Suppose Some text before is AppBar. You would feel a table breaking the layout. – Transfer

Yes. Just do not use the first two CSS rules above. Only use the last two rules. – Carlton

See also my answer here, which betters this answer I think. – Carlton

Need to replace overlflow-x: auto; with overflow-x: auto; – Skeg