position sticky load scrollLeft End
<!-- <div class="table-wrap">
<table>
<tr>
<th>テスト</th>
<th>テスト</th>
<th>テスト</th>
<th>テスト</th>
<th>テスト</th>
<th>テスト</th>
<th>テスト</th>
<th>テスト</th>
<th>テスト</th>
<th>テスト</th>
<th>2019(最新年)</th>
</tr>
</table>
</div> -->
<div class="sticky-wrap">
<table class="sticky">
<thead>
<tr>
<th>左固定</th>
<th class="top_heading">見出し</th>
<th class="top_heading">見出し</th>
<th class="top_heading">見出し</th>
<th class="top_heading">見出し</th>
<th class="top_heading">最後</th>
</tr>
</thead>
<tbody>
<tr>
<th>左見出し</th>
<td>テキスト</td>
<td>テキスト</td>
<td>テキスト</td>
<td>テキスト</td>
<td>テキスト</td>
</tr>
<tr>
<th>左見出し</th>
<td>テキスト</td>
<td>テキスト</td>
<td>テキスト</td>
<td>テキスト</td>
<td>テキスト</td>
</tr>
</tbody>
</table>
</div>
// $(window).on('load', function() {
// const w = $('.table-wrap > table').outerWidth()
// console.log(w)
// $('.table-wrap').scrollLeft(w)
// })
let totalWidth = 0
$('.top_heading').each(function(index) {
totalWidth += parseInt($(this).width(), 10);
})
console.log(totalWidth)
$(window).on('load', function() {
$('.sticky-wrap').scrollLeft(totalWidth)
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
.table-wrap {
width: 200px;
display: block;
overflow-x: scroll;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
}
.table-wrap table {
width: 100%;
}
.sticky-wrap {
width: 400px;
// height: 300px;
overflow: scroll;
}
.sticky {
table-layout: fixed;
width: 100%;
border-collapse: collapse;
border: 1px solid
#CCC;
thead tr th {
width: 100px;
position: sticky;
left: 0;
z-index: 3;
}
.top_heading {
position: sticky;
top: 0;
z-index: 2;
}
tbody tr th {
position: sticky;
left: 0;
z-index: 3;
}
th {
background: #DCDCDC
}
th, td {
padding: 5px;
border-collapse: collapse;
border: 1px solid #CCC;
}
}