position sticky load scrollLeft End

index.html

<!-- <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>

position-sticky-load-scrollleft-end.markdown

position sticky load scrollLeft End

A Pen by redamoon on CodePen.

License.

script.js

// $(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)
})

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

style.scss

.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;
  }
}