ヘッダー固定テーブル(float方式)でスクロールバーによりtheadとtbodyがずれる問題を解消する

↓この記事を参考にテーブルのヘッダー固定をしたのですが、
ゲームミュージックと生存確認をかねた画期的な: CSSによるおそらく最も簡単にヘッダとフッタを固定するスクロールテーブルの実装方法
Mac以外の場合スクロールバーが出るとその幅だけtbodyが縮まり、列がヘッダーとずれる問題があり頭を抱えました。
なんとかスクロールバーの幅を取得できないかと思いtbodyをconsole.log()に投げてみたところ以下のプロパティが判明したぽよ。

offsetWidth：スクロールバーを含めた幅
scrollWidth：スクロールバーを含めない幅

これで以下の感じでtheadの幅を設定して解消されました。
jQuery依存です。
ページ内にテーブル1つの前提なのでセレクターは適せん変更してください。

$( document ).ready( function() {
	var tbody = $( "tbody" );
	var offsetWidth = tbody.prop( "offsetWidth" );
	var scrollWidth = tbody.prop( "scrollWidth" );
	var scrollbarWidth = offsetWidth - scrollWidth;
	
	var thead = $( "thead" );
	thead.width( thead.width() - scrollbarWidth );
});