jqueryプラグイン「responsive-tables」がスマホだと表示が崩れる（1pxほどずれる）

###最初に
横に長い表(テーブル)をスマホでは、
左の列を固定し、それ以外はスクロールしてするという表現を実現するために、
jqueryプラグインの「responsive-tables」を使用し、
テーブルを作成しています。
responsive-tables

困っていること

iPhoneでみると、表示が崩れてしまう。

以下の画像のようにテーブルが1pxほどずれてしまう。
徐々にずれていっているような感じです

####ソース

<!DOCTYPE html>
<html lang="jp">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>テーブルテスト</title>
  <link rel="stylesheet" href="https://zurb.com/playground/projects/responsive-tables/responsive-tables.css">

<style>
table{
  border-collapse: collapse;
  border-spacing: 0;
}
td, th{
  border: 1px solid gray;
}

</style>

  <script src="https://zurb.com/playground/projects/responsive-tables/javascripts/jquery.min.js"></script>
  <script src="https://zurb.com/playground/projects/responsive-tables/responsive-tables.js"></script>

</head>
<body>

  <table class="responsive">
    <tr>
    <th>Header 1</th>
    <th>Header 2</th>
    <th>Header 3</th>
    <th>Header 4</th>
    <th>Header 5</th>
    <th>Header 6</th>
    <th>Header 7</th>
    <th>Header 8</th>
    </tr>
    <tr>
    <td>row 1, cell 1</td>
    <td>row 1, cell 2</td>
    <td>row 1, cell 3</td>
    <td>row 1, cell 4</td>
    <td>row 1, cell 5</td>
    <td>row 1, cell 6</td>
    <td>row 1, cell 7</td>
    <td>row 1, cell 8</td>
    </tr>
    <tr>
    <td>row 2, cell 1<br />改行</td>
    <td>row 2, cell 2</td>
    <td>row 2, cell 3</td>
    <td>row 2, cell 4</td>
    <td>row 2, cell 5</td>
    <td>row 2, cell 6</td>
    <td>row 2, cell 7</td>
    <td>row 2, cell 8</td>
    </tr>
    <tr>
    <td>row 3, cell 1</td>
    <td>row 3, cell 2</td>
    <td>row 3, cell 3</td>
    <td>row 3, cell 4</td>
    <td>row 3, cell 5</td>
    <td>row 3, cell 6</td>
    <td>row 3, cell 7<br />改行</td>
    <td>row 3, cell 8</td>
    </tr>
    <tr>
    <td>row 4, cell 1</td>
    <td>row 4, cell 2</td>
    <td>row 4, cell 3</td>
    <td>row 4, cell 4</td>
    <td>row 4, cell 5</td>
    <td>row 4, cell 6</td>
    <td>row 4, cell 7</td>
    <td>row 4, cell 8</td>
    </tr>
  </table>

</body>
</html>

codepenはこちら

環境

機種：　iPhone6s
OS ver： 11.4

###試したこと

調べた
プラグインのgithubのissueの一覧を確認した。
タイトルだけで、該当するものが見当たらなかった

ググった
＜検索キーワード＞
「iPhone テーブル 1px」
「iphone table 崩れる」
「jquery table 崩れる」
など

jQueryのバージョンを変えて見た
1、2、3と試した。

terataileでも、それとなく検索してみた

＜みた記事＞
ableのヘッダ固定を行うCSS & JQuery

↑ こちらの記事は、僕の読解力では、今、困っていることに応用できそうになかったので、
この記事を読んだ後、無理だ、、なりました。

以上です。

すみません、javascript初心者で、
何が原因なのかわからないので、どなたか教えていただけると幸いです。

###追記

公式のサンプルがずれていた

x_x

2018/08/29 09:10

公式サイトのサンプルはずれませんか？

Tatsurou

2018/08/29 10:19

公式もずれていました。

行動規範の内容に同意します

回答3件

PC上でも確認しました

gifを別タブで開いて見てもらうと分かりやすいと思いますが，固定部分にもスクロールバーが出ており，しかも，overflow: hidden;されています
box-sizing: border-box;をしても，同様の状況でした

開発者ツールで見てみると，jsで複製した要素の高さはきりがいいのに対し，
元の要素の高さはいわゆるfloat型の数値でした

小数はプログラミングにおいて厄介な存在です．なぜなら現代のコンピュータは2進数で動いており，小数点以下の数を正しく計算しきれないからです
もしもできるなら，要素の全ての高さを整数にしてください．それが最も簡単な方法でしょう

試しに取得した高さを随時alert()させてみたところ，取得時点ですでに整数でした

小数で取得する方法があれば良いのですが，私はそれを知りません．
tableの全ての子要素の高さを整数に書き直すスクリプトを書くのも一案ですが，私はあまりすきではありません．

ならどうするか？

HTMLとCSSだけで実装する方法があります

これはこちらで回答したときにつくったデモです．
https://thimbleprojects.org/liveasnotes/535364/

（コードの閲覧・編集は，右上の「リミックス」ボタンからできます）

以下は元の投稿からの引用です

一番左側の要素（trの最初の子要素）をどうにかしたいので，:first-child擬似クラスを利用
position:absolute;を指定した要素は，直近のposition:relative;が指定された祖先要素を基準に配置される

→.w{position: relative;}，tr >:first-child::before{position: absolute;}

高さを継承するには，当該要素の子要素である必要がある

→::before擬似要素の利用，height: inherit;
（※height:100%;だと，.wの高さが代入されてしまう）

属性値を使って，柔軟に表示を変えたい

→擬似クラスのcontentプロパティにattr(data-cont)で，勝手に作ったdata-cont属性の中の値を代入

そのほか微調整

（ネガティブマージンでcalc()を使って位置を上にずらしたり，border-spacing: 0;したり，word-break: break-all;したり...）

ちなみにですがoverflow-wrapはMicrosoftの独自拡張だったword-wrapが多くのブラウザで実装されたためにCSS3 Text仕様書で現在のoverflow-wrapに改名されました。改名された現在でもword-wrapは今のところ問題なく使えます。

尚，Pattern2の方法は，IE 11でも有効です

昨今のCSSはとてもリッチです．
もし余裕があれば，CSSで実装する方法がないか調べてみると良いでしょう

投稿2018/08/29 09:32

liveasnotes

総合スコア1284

Tatsurou

2018/08/29 11:01

ご回答ありがとうございます！ > 固定部分にもスクロールバーが出る事についてこちらは文字数を長くした時に見つけたのですが、特に問題ないかなーと放置していました。表示崩れの原因になりますでしょうか。 > 高さ指定について tr に高さ指定が固定部分だけに指定されることを確認しました。 > もしもできるなら，要素の全ての高さを整数にしてくださいちょっと僕には無理かもしれません、、 > 取得した高さを随時alert() 確認しました。確かに整数しか出てこなかったです。 > HTMLとCSSだけで実装頂いた方法で、明日、トライしてみようと思います。改めて、明日、結果を報告いたします。ご丁寧にご教授いただきありがとうございました。

liveasnotes

2018/08/29 14:44 編集

きちんと調べきれていないのですが， https://zurb.com/playground/projects/responsive-tables/index.html（jQueryプラグインのデモ）の表のセルは，高さが整数値だったので，何らかの工夫をしているのかもしれません．（あるいは，見落としている記述があるのかも...）気が向いたら（笑），また詳しく調べてみようと思います --- > x_xさん「公式サイトのサンプルはずれませんか？」 > WataruTさん「公式もずれていました。」 LAN「？？？w」

Tatsurou

2018/08/30 01:41

他の方からも回答頂いたので、CSSと並行して試してみたいと思います。デモの方についてなのですが、やはり、崩れていましたのでスクショを追加しました。

行動規範の内容に同意します

自己解決

なんとか解決？！

以下のスタイル指定が原因でした。。

table {
  border-collapse: collapse;
}

こちらの指定をやめることでズレがなくなりました。

table {
  border-collapse: initial;
}

ただ、セパレートにしてしまうと、borderの太さが2倍になってしまうので、本当の解決にはなっていないのかもしれませんが、、

投稿2018/10/05 09:00

Tatsurou

総合スコア81

※こちらで問題が再現しないので、間違った回答かもしれません。

setCellHeights()で、問答無用でheightをコピーしてはいかがでしょうか？

js
1//この比較部分の影響で、想定の動きをしない？
2  		tr_copy.each(function(index) {
3  			var height_copy = $(this).outerHeight(true);
4  			if (height_copy > heights[index]) {
5  				$(tr).eq(index).height(height_copy);
6  			} else {
7  				$(this).height(heights[index]);
8  			}
9  		});

↓
以下なら高さが実数であろうが問答無用で同じ値にするはずです。
ZURB responsive-tables, patched for better performance

js
1  function setCellHeights(original, copy) {
2    var tr = original.find('tr'),
3        tr_copy = copy.find('tr');
4        
5    var heights = [];
6    
7    tr.each(function (index) {
8      heights[index] = this.offsetHeight;
9    });
10    
11    tr_copy.each(function (index) {
12      this.style.height = heights[index] + 'px';
13    });
14    
15  }