Really long table goes out of a div. How to hide overflowing table without losing sticky elements inside of it?

Question

I have really long table, and the table goes outside of the parent div. I could not change width of it to fit window size (parent width 100%).

If main has overflow: hidden;, it makes important table sticky elements not sticky and not scrollable horizontally.

It is also possible to make .series__table_container overflow-x: scroll;, it looks as i want it, but thead th elements not sticky after it.

Is there any possible way to hide overflown table content so it's not going outside of the main, making all html document wide, without loosing sticky elements at all?

body {
  overflow-x: scroll;
}

.main {
  display: flex;
}

.left-box {
  width: 15%;
  height: 2000px;
  background-color: grey;
}

.right-box {
  width: 85%;
  background-color: wheat;
}

.series__table_container {
  width: 100%;
}

.tables__wrapper-row {
  margin-top: 50px;
}

.tr-names th {
  background-color: blue;
  position: sticky;
  top: 0;
}

.tr-units th {
  background-color: green;
  position: sticky;
  top: 0;
}

tbody tr .tsl-check,
tbody tr .tsl-series {
  background-color: pink;
  position: sticky;
  left: 0;
}

<div class="main">
        <div class="left-box">
        </div>
        <div class="right-box">
            <div class="series__table_container">
                <div class="container">
                    <div class="tables__wrapper">
                        <div class="tables__wrapper-row">
                            <div class="series__table">
                                <table>
                                    <thead>
                                        <tr class="tr-names">
                                            <th class="tsl-check">
                                                <label class="check">
                                                    <input type="checkbox">
                                                    <span class="check_mark"></span>
                                                </label>
                                            </th>
                                            <th class="tsl-series">Select All</th>
                                            <th colspan="6" class="tsl-colgroup active">ASDQWE ASDQWE</th>
                                            <th colspan="1" class="tsl-colgroup active">ASDQWE ASDQWE</th>
                                            <th colspan="10" class="tsl-colgroup active">ASDQWE ASDQWE</th>
                                            <th colspan="2" class="tsl-colgroup active">ASDQWE ASDQWE</th>
                                            <th colspan="1" class="tsl-colgroup active">ASDQWE ASDQWE</th>
                                            <th colspan="5" class="tsl-colgroup active">ASDQWE ASDQWE</th>
                                            <th colspan="13" class="tsl-colgroup active">ASDQWE ASDQWE</th>
                                            <th colspan="4" class="tsl-colgroup active">ASDQWE ASDQWE</th>
                                        </tr>
                                        <tr class="tr-units">
                                            <th class="tsl-series" colspan="2"><strong>Section</strong></th>
                                            <th class="tsl-cell">h<span class="unit">[mm]</span></th>
                                            <th class="tsl-cell">b<span class="unit">[mm]</span></th>
                                            <th class="tsl-cell">t<sub>w</sub><span class="unit">[mm]</span></th>
                                            <th class="tsl-cell">t<sub>f</sub><span class="unit">[mm]</span></th>
                                            <th class="tsl-cell">r<sub>1</sub><span class="unit">[mm]</span></th>
                                            <th class="tsl-cell">d<span class="unit">[mm]</span></th>
                                            <th class="tsl-cell">A<span class="unit">[cm<sup>2</sup>]</span></th>
                                            <th class="tsl-cell">I<sub>y</sub><span class="unit">[cm<sup>4</sup>]</span></th>
                                            <th class="tsl-cell">I<sub>z</sub><span class="unit">[cm<sup>4</sup>]</span></th>
                                            <th class="tsl-cell">I<sub>p</sub><span class="unit">[cm<sup>4</sup>]</span></th>
                                            <th class="tsl-cell">i<sub>y</sub><span class="unit">[mm]</span></th>
                                            <th class="tsl-cell">i<sub>z</sub><span class="unit">[mm]</span></th>
                                            <th class="tsl-cell">i<sub>p</sub><span class="unit">[mm]</span></th>
                                            <th class="tsl-cell">max S<sub>y</sub><span class="unit">[cm<sup>3</sup>]</span></th>
                                            <th class="tsl-cell">max S<sub>z</sub><span class="unit">[cm<sup>3</sup>]</span></th>
                                            <th class="tsl-cell">W<sub>y</sub><span class="unit">[cm<sup>3</sup>]</span></th>
                                            <th class="tsl-cell">W<sub>z</sub><span class="unit">[cm<sup>3</sup>]</span></th>
                                            <th class="tsl-cell">A<sub>y</sub><span class="unit">[cm<sup>2</sup>]</span></th>
                                            <th class="tsl-cell">A<sub>z</sub><span class="unit">[cm<sup>2</sup>]</span></th>
                                            <th class="tsl-cell">I<sub>t</sub><span class="unit">[cm<sup>4</sup>]</span></th>
                                            <th class="tsl-cell">max ω<span class="unit">[cm<sup>2</sup>]</span></th>
                                            <th class="tsl-cell">I<sub>ω</sub><span class="unit">[cm<sup>6</sup>]</span></th>
                                            <th class="tsl-cell">i<sub>ω</sub><span class="unit">[mm]</span></th>
                                            <th class="tsl-cell">W<sub>ω</sub><span class="unit">[cm<sup>4</sup>]</span></th>
                                            <th class="tsl-cell">max S<sub>ω</sub><span class="unit">[cm<sup>4</sup>]</span></th>
                                            <th class="tsl-cell">W<sub>pl,y</sub><span class="unit">[cm<sup>3</sup>]</span></th>
                                            <th class="tsl-cell">W<sub>pl,z</sub><span class="unit">[cm<sup>3</sup>]</span></th>
                                            <th class="tsl-cell">W<sub>pl,ω</sub><span class="unit">[cm<sup>4</sup>]</span></th>
                                            <th class="tsl-cell">α<sub>pl,y</sub><span class="unit"> </span></th>
                                            <th class="tsl-cell">α<sub>pl,z</sub><span class="unit"> </span></th>
                                            <th class="tsl-cell">α<sub>pl,ω</sub><span class="unit"> </span></th>
                                            <th class="tsl-cell">A<sub>pl,y</sub><span class="unit">[cm<sup>2</sup>]</span></th>
                                            <th class="tsl-cell">A<sub>pl,z</sub><span class="unit">[cm<sup>2</sup>]</span></th>
                                            <th class="tsl-cell">N<sub>pl</sub><span class="unit">[kN]</span></th>
                                            <th class="tsl-cell">V<sub>pl,y</sub><span class="unit">[kN]</span></th>
                                            <th class="tsl-cell">V<sub>pl,z</sub><span class="unit">[kN]</span></th>
                                            <th class="tsl-cell">M<sub>pl,y</sub><span class="unit">[kNm]</span></th>
                                            <th class="tsl-cell">M<sub>pl,z</sub><span class="unit">[kNm]</span></th>
                                            <th class="tsl-cell">G<span class="unit">[kg/m]</span></th>
                                            <th class="tsl-cell">A<sub>m</sub><span class="unit">[m<sup>2</sup>/m]</span></th>
                                            <th class="tsl-cell">V<span class="unit">[cm<sup>3</sup>/m]</span></th>
                                            <th class="tsl-cell">A<sub>m</sub>/V<span class="unit">[1/m]</span></th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr class="" id="605">
                                            <td class="tsl-check">
                                                <label class="check">
                                                    <input type="checkbox">
                                                    <span class="check_mark"></span>
                                                </label>
                                            </td>
                                            <td class="tsl-series active"><strong>qwe</strong><span class="sl-info-icon"> <a id="605" title="More info"> i </a></span></td>
                                            <td class="tsl-cell" style=""> <a>127.0</a> </td>
                                            <td class="tsl-cell" style=""> <a>76.0</a> </td>
                                            <td class="tsl-cell" style=""> <a>4.0</a> </td>
                                            <td class="tsl-cell" style=""> <a>7.6</a> </td>
                                            <td class="tsl-cell" style=""> <a>7.6</a> </td>
                                            <td class="tsl-cell" style=""> <a>96.6</a> </td>
                                            <td class="tsl-cell" style=""> <a>16.50</a> </td>
                                            <td class="tsl-cell" style=""> <a>473.00</a> </td>
                                            <td class="tsl-cell" style=""> <a>56.00</a> </td>
                                            <td class="tsl-cell" style=""> <a>529.00</a> </td>
                                            <td class="tsl-cell"> <a>53.5</a> </td>
                                            <td class="tsl-cell"> <a>18.4</a> </td>
                                            <td class="tsl-cell"> <a>56.6</a> </td>
                                            <td class="tsl-cell"> <a>42.00</a> </td>
                                            <td class="tsl-cell"> <a>5.50</a> </td>
                                            <td class="tsl-cell"> <a>75.00</a> </td>
                                            <td class="tsl-cell"> <a>15.00</a> </td>
                                            <td class="tsl-cell"> <a>9.79</a> </td>
                                            <td class="tsl-cell"> <a>4.82</a> </td>
                                            <td class="tsl-cell"> <a>2.85</a> </td>
                                            <td class="tsl-cell"> <a>22.69</a> </td>
                                            <td class="tsl-cell"> <a>2000.00</a> </td>
                                            <td class="tsl-cell"> <a>19.4</a> </td>
                                            <td class="tsl-cell"> <a>88.16</a> </td>
                                            <td class="tsl-cell"> <a>32.76</a> </td>
                                            <td class="tsl-cell"> <a>84.00</a> </td>
                                            <td class="tsl-cell"> <a>23.00</a> </td>
                                            <td class="tsl-cell"> <a>131.03</a> </td>
                                            <td class="tsl-cell"> <a>1.120</a> </td>
                                            <td class="tsl-cell"> <a>1.533</a> </td>
                                            <td class="tsl-cell"> <a>1.500</a> </td>
                                            <td class="tsl-cell"> <a>11.55</a> </td>
                                            <td class="tsl-cell"> <a>4.78</a> </td>
                                            <td class="tsl-cell"> <a>388.229</a> </td>
                                            <td class="tsl-cell"> <a>156.734</a> </td>
                                            <td class="tsl-cell"> <a>64.799</a> </td>
                                            <td class="tsl-cell"> <a>19.78</a> </td>
                                            <td class="tsl-cell"> <a>5.31</a> </td>
                                            <td class="tsl-cell"> <a>13.0</a> </td>
                                            <td class="tsl-cell"> <a>0.537</a> </td>
                                            <td class="tsl-cell"> <a>1650.00</a> </td>
                                            <td class="tsl-cell"> <a>325.426</a> </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div> <!-- series__table -->
                        </div>
                        <div class="tables__wrapper-row">
                            <div class="series__table">
                                <table>
                                    <thead>
                                        <tr class="tr-names">
                                            <th class="tsl-check">
                                                <label class="check">
                                                    <input type="checkbox">
                                                    <span class="check_mark"></span>
                                                </label>
                                            </th>
                                            <th class="tsl-series">Select All</th>
                                            <th colspan="6" class="tsl-colgroup active">ASDQWE ASDASDASD</th>
                                            <th colspan="1" class="tsl-colgroup active">ASDQWE ASDASDASD</th>
                                            <th colspan="10" class="tsl-colgroup active">ASDQWE ASDASDASD</th>
                                            <th colspan="2" class="tsl-colgroup active">ASDQWE ASDASDASD</th>
                                            <th colspan="1" class="tsl-colgroup active">ASDQWE ASDASDASD</th>
                                            <th colspan="5" class="tsl-colgroup active">ASDQWE ASDASDASD</th>
                                            <th colspan="13" class="tsl-colgroup active">ASDQWE ASDASDASD</th>
                                            <th colspan="4" class="tsl-colgroup active">ASDQWE ASDASDASD</th>
                                        </tr>
                                        <tr class="tr-units">
                                            <th class="tsl-series" colspan="2"><strong>Section</strong></th>
                                            <th class="tsl-cell">h<span class="unit">[mm]</span></th>
                                            <th class="tsl-cell">b<span class="unit">[mm]</span></th>
                                            <th class="tsl-cell">t<sub>w</sub><span class="unit">[mm]</span></th>
                                            <th class="tsl-cell">t<sub>f</sub><span class="unit">[mm]</span></th>
                                            <th class="tsl-cell">r<sub>1</sub><span class="unit">[mm]</span></th>
                                            <th class="tsl-cell">d<span class="unit">[mm]</span></th>
                                            <th class="tsl-cell">A<span class="unit">[cm<sup>2</sup>]</span></th>
                                            <th class="tsl-cell">I<sub>y</sub><span class="unit">[cm<sup>4</sup>]</span></th>
                                            <th class="tsl-cell">I<sub>z</sub><span class="unit">[cm<sup>4</sup>]</span></th>
                                            <th class="tsl-cell">I<sub>p</sub><span class="unit">[cm<sup>4</sup>]</span></th>
                                            <th class="tsl-cell">i<sub>y</sub><span class="unit">[mm]</span></th>
                                            <th class="tsl-cell">i<sub>z</sub><span class="unit">[mm]</span></th>
                                            <th class="tsl-cell">i<sub>p</sub><span class="unit">[mm]</span></th>
                                            <th class="tsl-cell">max S<sub>y</sub><span class="unit">[cm<sup>3</sup>]</span></th>
                                            <th class="tsl-cell">max S<sub>z</sub><span class="unit">[cm<sup>3</sup>]</span></th>
                                            <th class="tsl-cell">W<sub>y</sub><span class="unit">[cm<sup>3</sup>]</span></th>
                                            <th class="tsl-cell">W<sub>z</sub><span class="unit">[cm<sup>3</sup>]</span></th>
                                            <th class="tsl-cell">A<sub>y</sub><span class="unit">[cm<sup>2</sup>]</span></th>
                                            <th class="tsl-cell">A<sub>z</sub><span class="unit">[cm<sup>2</sup>]</span></th>
                                            <th class="tsl-cell">I<sub>t</sub><span class="unit">[cm<sup>4</sup>]</span></th>
                                            <th class="tsl-cell">max ω<span class="unit">[cm<sup>2</sup>]</span></th>
                                            <th class="tsl-cell">I<sub>ω</sub><span class="unit">[cm<sup>6</sup>]</span></th>
                                            <th class="tsl-cell">i<sub>ω</sub><span class="unit">[mm]</span></th>
                                            <th class="tsl-cell">W<sub>ω</sub><span class="unit">[cm<sup>4</sup>]</span></th>
                                            <th class="tsl-cell">max S<sub>ω</sub><span class="unit">[cm<sup>4</sup>]</span></th>
                                            <th class="tsl-cell">W<sub>pl,y</sub><span class="unit">[cm<sup>3</sup>]</span></th>
                                            <th class="tsl-cell">W<sub>pl,z</sub><span class="unit">[cm<sup>3</sup>]</span></th>
                                            <th class="tsl-cell">W<sub>pl,ω</sub><span class="unit">[cm<sup>4</sup>]</span></th>
                                            <th class="tsl-cell">α<sub>pl,y</sub><span class="unit"> </span></th>
                                            <th class="tsl-cell">α<sub>pl,z</sub><span class="unit"> </span></th>
                                            <th class="tsl-cell">α<sub>pl,ω</sub><span class="unit"> </span></th>
                                            <th class="tsl-cell">A<sub>pl,y</sub><span class="unit">[cm<sup>2</sup>]</span></th>
                                            <th class="tsl-cell">A<sub>pl,z</sub><span class="unit">[cm<sup>2</sup>]</span></th>
                                            <th class="tsl-cell">N<sub>pl</sub><span class="unit">[kN]</span></th>
                                            <th class="tsl-cell">V<sub>pl,y</sub><span class="unit">[kN]</span></th>
                                            <th class="tsl-cell">V<sub>pl,z</sub><span class="unit">[kN]</span></th>
                                            <th class="tsl-cell">M<sub>pl,y</sub><span class="unit">[kNm]</span></th>
                                            <th class="tsl-cell">M<sub>pl,z</sub><span class="unit">[kNm]</span></th>
                                            <th class="tsl-cell">G<span class="unit">[kg/m]</span></th>
                                            <th class="tsl-cell">A<sub>m</sub><span class="unit">[m<sup>2</sup>/m]</span></th>
                                            <th class="tsl-cell">V<span class="unit">[cm<sup>3</sup>/m]</span></th>
                                            <th class="tsl-cell">A<sub>m</sub>/V<span class="unit">[1/m]</span></th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr class="" id="605">
                                            <td class="tsl-check">
                                                <label class="check">
                                                    <input type="checkbox">
                                                    <span class="check_mark"></span>
                                                </label>
                                            </td>
                                            <td class="tsl-series active"><strong>qwe</strong><span class="sl-info-icon"> <a id="605" title="More info"> i </a></span></td>
                                            <td class="tsl-cell" style=""> <a>127.0</a> </td>
                                            <td class="tsl-cell" style=""> <a>76.0</a> </td>
                                            <td class="tsl-cell" style=""> <a>4.0</a> </td>
                                            <td class="tsl-cell" style=""> <a>7.6</a> </td>
                                            <td class="tsl-cell" style=""> <a>7.6</a> </td>
                                            <td class="tsl-cell" style=""> <a>96.6</a> </td>
                                            <td class="tsl-cell" style=""> <a>16.50</a> </td>
                                            <td class="tsl-cell" style=""> <a>473.00</a> </td>
                                            <td class="tsl-cell" style=""> <a>56.00</a> </td>
                                            <td class="tsl-cell" style=""> <a>529.00</a> </td>
                                            <td class="tsl-cell"> <a>53.5</a> </td>
                                            <td class="tsl-cell"> <a>18.4</a> </td>
                                            <td class="tsl-cell"> <a>56.6</a> </td>
                                            <td class="tsl-cell"> <a>42.00</a> </td>
                                            <td class="tsl-cell"> <a>5.50</a> </td>
                                            <td class="tsl-cell"> <a>75.00</a> </td>
                                            <td class="tsl-cell"> <a>15.00</a> </td>
                                            <td class="tsl-cell"> <a>9.79</a> </td>
                                            <td class="tsl-cell"> <a>4.82</a> </td>
                                            <td class="tsl-cell"> <a>2.85</a> </td>
                                            <td class="tsl-cell"> <a>22.69</a> </td>
                                            <td class="tsl-cell"> <a>2000.00</a> </td>
                                            <td class="tsl-cell"> <a>19.4</a> </td>
                                            <td class="tsl-cell"> <a>88.16</a> </td>
                                            <td class="tsl-cell"> <a>32.76</a> </td>
                                            <td class="tsl-cell"> <a>84.00</a> </td>
                                            <td class="tsl-cell"> <a>23.00</a> </td>
                                            <td class="tsl-cell"> <a>131.03</a> </td>
                                            <td class="tsl-cell"> <a>1.120</a> </td>
                                            <td class="tsl-cell"> <a>1.533</a> </td>
                                            <td class="tsl-cell"> <a>1.500</a> </td>
                                            <td class="tsl-cell"> <a>11.55</a> </td>
                                            <td class="tsl-cell"> <a>4.78</a> </td>
                                            <td class="tsl-cell"> <a>388.229</a> </td>
                                            <td class="tsl-cell"> <a>156.734</a> </td>
                                            <td class="tsl-cell"> <a>64.799</a> </td>
                                            <td class="tsl-cell"> <a>19.78</a> </td>
                                            <td class="tsl-cell"> <a>5.31</a> </td>
                                            <td class="tsl-cell"> <a>13.0</a> </td>
                                            <td class="tsl-cell"> <a>0.537</a> </td>
                                            <td class="tsl-cell"> <a>1650.00</a> </td>
                                            <td class="tsl-cell"> <a>325.426</a> </td>
                                        </tr>
                                       
                                    </tbody>
                                </table>
                            </div> <!-- series__table -->
                        </div>
                    </div> <!-- tables__wrapper -->
                </div> <!-- container -->
            </div>
        </div>
    </div>

would that fix your worry ? : `html { width:100%; height:100%; overflow-x: hidden; }` not sure i understood the question ... — G-Cyrillus, Jun 16 '20 at 13:51
Does this answer your question? [Why does \`overflow:hidden\` prevent \`position:sticky\` from working?](https://stackoverflow.com/questions/43909940/why-does-overflowhidden-prevent-positionsticky-from-working) — charles, Jun 16 '20 at 14:04

score 0 · Answer 1 · answered Jun 16 '20 at 13:50

Possible duplicate of Why does overflow:hidden prevent position:sticky from working?

Sticky elements stick to the nearest ancestor with a scrolling mechanism. When you apply an overflow declaration to your .main element, this element becomes the scrolling ancestor.

This is a known issue. See issue on w3c/csswg-drafts (GitHub)

You can use JavaScript to achieve your intended effect.

A solution from Dannie Vinther: Position: stuck; — and a way to fix it (UX Collective)
A polyfill: stickyfill (GitHub)

Really long table goes out of a div. How to hide overflowing table without losing sticky elements inside of it?

1 Answers1