DataTables scrollX bug ヘッダーとボディの間にずれが生じる

簡単にフィルター付き&ソート付きのテーブルを生成できるjQueryライブラリ「DataTables」。WordPressで scrollX: true にするとテーブルヘッダー th とボディ tbody の間にずれが生じた。

DataTableのバグらしいが、ググっても scrollY: true の場合の問題しか出てこないので書く。

今回はWordPressでのみ起こり、かつ .container の中で使うと発生した。DataTablesの仕様でテーブルのWidthやHeightを調整するときに、もともとのテーブルに適用されているCSS（margin-bottom）を引っ張ってきて、整形後にstyleプロパティでダイレクトに挿入しちゃうらしい。

というのも本来 <table> は1つだが、scrollXをtrueにするとtheadとtbodyで分断され、それぞれ独立した <table> が生成される。そこにもともとWordPressが適用していた table { margin-bottom: 1rem; } により挿入されたstyleプロパティで間にスペースが空いてしまうらしい。

また scrollX: true; ではテーブルヘッダーとテーブルボディが独立した table ゆえ、微妙にずれて横するロールする。よってカクカクしてUX上ダメ。

解決策

scrollX: true にはせず、逆に "autoWidth": false にする。なぜかダブルクォーテーションで囲む必要がある。これでWidthを変更するstyleプロパティ（ width: 100% ）は挿入されないので、あとはCSSを書いて完成！

var table = $('#product-table').DataTable({	
	// 各自設定したいOption
      "autoWidth": false,
});

#product-table {
    display: block;
    overflow-x: scroll;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
}