floatThead.js IE11 bug #note

floatThead.js 2以降で発生するIE11のバグ。
インラインのスクロールボックス内テーブルに対して使用した場合に、theadのwidthが狭くなってしまう症状が発生。
スクロールバー領域幅の誤認識によって実際のテーブル幅よりthead幅が狭くなります。
旧バージョン(1.x系)にすることで回避できます。

また、scrollbarカスタマイズのプラグインを併用している場合はスクロールボックスのoverflowをautoやscrollではなくhiddenにしてブラウザのスクロールバー自体を無くしてしまうことでズレを解消できます。
この方法ではズレの原因となるブラウザスクロールバー自体表示しないためv2以降の最新版でも問題は発生しません。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Document</title>
<meta http-equiv="x-ua-compatible" content="ie=edge">
<script src="http://code.jquery.com/jquery-3.2.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/floatthead/2.0.3/jquery.floatThead.js"></script>
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/floatthead/1.4.5/jquery.floatThead.min.js"></script>-->
<link rel="stylesheet" href="perfect-scrollbar.css">
<script src="perfect-scrollbar.js"></script>
<style>
* {
  margin: 0;
  padding: 0;
}
.sample {
  position: relative;
/*  overflow-y: scroll;*/
  overflow: hidden !important; /* perfect-scrollbar box on floatThead IE11bugfix */
  width: 330px;
  height: 300px;
  box-sizing: border-box;
}
table {
  width: 100%;
  border-collapse: collapse;
  box-sizing: border-box;
}
.table th,
.table td {
  padding: 6px;
  border: 1px solid #000;
}
.table thead th {
  border: 1px solid #000;
  background-color: #eee;
}
.table tbody th,
.table tbody td {
  padding: 100px 6px;
}
</style>
<script>
$(function() {
  var $table = $('.table');
  $table.floatThead({
    scrollContainer: function ($table) {
      return $table.closest('.sample');
    }
  });
  new PerfectScrollbar('#container');
});
</script>
</head>
<body>

<br>
<div class="sample" id="container">
  <table class="table">
    <thead>
      <tr>
        <th>hoge</th>
        <th>fuga</th>
        <th>piyo</th>
        <th>moga</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th>hoge</th>
        <td>fuga</td>
        <td>piyo</td>
        <td>mog</td>
      </tr>
      <tr>
        <th>hoge</th>
        <td>fuga</td>
        <td>piyo</td>
        <td>mog</td>
      </tr>
      <tr>
        <th>hoge</th>
        <td>fuga</td>
        <td>piyo</td>
        <td>mog</td>
      </tr>
      <tr>
        <th>hoge</th>
        <td>fuga</td>
        <td>piyo</td>
        <td>mog</td>
      </tr>
      <tr>
        <th>hoge</th>
        <td>fuga</td>
        <td>piyo</td>
        <td>mog</td>
      </tr>
      <tr>
        <th>hoge</th>
        <td>fuga</td>
        <td>piyo</td>
        <td>mog</td>
      </tr>
    </tbody>
  </table>
</div>

</body>
</html>

以上、ありがとうございました。