У меня очень длинная таблица , и таблица выходит за пределы родительского 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>