html - 真的很长的桌子从一个div出来。如何隐藏溢出的表格而不丢失其中的粘性元素？
问题描述
我有很长的桌子，桌子在父 div 之外。我无法更改它的宽度以适应窗口大小（父宽度 100%）。
如果 main 有overflow: hidden;，它会使重要的表格粘性元素不能sticky水平滚动。
也可以制作.series__table_container overflow-x: scroll;，它看起来像我想要的那样，但它thead th之后的元素不粘。
是否有任何可能的方法来隐藏溢出的表格内容，使其不会超出主要内容，使所有 html 文档变宽，而不会丢失粘性元素？
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>解决方案
为什么阻止工作的可能重复项？overflow:hiddenposition:sticky
粘性元素通过滚动机制粘在最近的祖先上。当您将overflow声明应用于您的.main元素时，该元素将成为滚动祖先。
这是一个已知的问题。请参阅w3c/csswg-drafts (GitHub) 上的问题
你可以使用 JavaScript 来达到你想要的效果。
- Dannie Vinther 的解决方案：位置：卡住；- 以及修复它的方法（UX Collective）
- 一个 polyfill：stickyfill (GitHub)
推荐阅读
- mysql - 如何使用 exec.Command 登录 mysql
- c - 三个带有 2 个 RGB LED 的传感器 Arduino
- php - 如果从 laravel 5.4 中的表中删除记录，如何保持在同一页面上？
- r - 比较后打印带有标题的计算值
- javascript - 在另一个中映射两个不同的数组
- julia - Julia：如何将函数的参数类型定义为元组数组？
- drools - 杜尔斯处理失败
- javascript - 错误：TypeError：无法读取未定义的属性“标志”
- python - python 3.73 (Windows, urllib3) ssl.SSLCertVerificationError: [SSL: CERTIFICATE_VERIFY_FAILED]
- postgresql - 超大型数据集上 LIKE 样式查询的索引列