我有一个很长的表，并且表在父div之外。 我不能改变它的宽度以适应窗口大小（父宽度100%）。
如果main具有overflow:hidden；，则会使重要的表粘滞元素不粘滞，并且不能水平滚动。
也可以使.series__table_containeroverflow-x:scroll；，这看起来就像我想要的那样，但是后面的和th元素没有粘性。
有没有任何可能的方法来隐藏溢出的表内容，这样它就不会超出主要内容，使所有的html文档都变宽，而不会丢失粘滞元素？
null
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>null
为什么溢出:隐藏阻止位置:粘滞工作？
粘性元素通过滚动机制粘附到最近的祖先。 当对.main元素应用overflow声明时，此元素将成为滚动祖先。
这是一个已知的问题。 请参阅W3C/CSSWG-Drafts（GitHub）问题
您可以使用JavaScript来实现您预期的效果。
