「table要素」はそもそも普通じゃない
「Blog Table ⭐」を作って来て何度も感じさせられた事は、「table要素」は普通じゃないという事です。 この記事を書きながら調べていて、下の記事を見つけました。 いちいち頷いてしまいました。 ページは主内容は表題の通りですが、その中に「table要素」に関しても触れられています。
このページは『ChromeとFirefoxで表幅の扱いが異なる』という語で検索した時に見つけたのですが。
ブラウザ表示の比較
このページの両ブラウザの比較は「table-layout: fixed」を指定した「table要素」での比較ですが、「table-layout: auto」でも全く同じです。「Fix」モードの方がテスト上で表のレイアウトを調節し易いので「Fix」にしているだけです。
「table要素」の基準は以下です。
▪「セルの枠線幅 40px」で「5列・2行」、セル幅は等幅を指定。
▪「border-collapse: collapse」「border-spacing: 0px」の指定でセル枠線の重ね合わせを指定
▪「border: 1px solid transparent」で「table要素」全体の外枠線を指定していますが、この1pxが表全体の幅に含まれるか否かは「誤差の範囲」として考えています。
▪ 編集枠の本文幅「620px」いっぱいに表示される幅に、セル幅を調節しています。
◎ Chromeの表示です。 パネルの表幅表示は「620px」で、「table要素」はスタイル属性で「width: 620px」が指定されています。
◎ Firefoxの表示です。パネルの表幅表示は「581px」で、「table要素」はスタイル属性で「width: 581px」が指定されています。
この表の「C0」のセルに半角英文字の「i」を並べていますが、どちらの場合も14文字でセル内の折り返しが生じるので、セルは同幅にレンダリングされています。
「620px」と「581px」の差はセルの枠線幅「40px」にほぼ一致します。（この際、1pxは計算誤差と考えておきます）
「DevTools」と「要素の調査」
両ブラウザで要素の幅をどう扱っているか調べました。
◎ Chromeでは「tbody要素」の幅は「580px」です。
「tbody」は、セル枠幅の実際の指定は40pxですが、その半分の「20px」で描画して、セル枠の重ね合わせた状態を演出している様に見えます。「tbody」はそれで良いと考えた様ですが、「table」全体では「セル枠の重ね合わせ」た状態を演出するために、「tbody」の周囲に「20px」幅の枠線を追加しています。
Chromeの「table要素」の幅の「620px」は、この「20px」（黄色の部分）の外枠を追加したものを「table要素」の幅と考えた結果でしょう。
◎ Firefoxの「要素の調査」では、表幅の考え方が異なります。
Firefoxは「tbody」「table」の両方とも「581px」です。「tbody」はChromeと同じですが、「table要素」の幅は外側に描画した「20px」を含めません。
しかし、実際には表幅の計算に「20px」は入っているので、これはChromeの方が正しいのではないかと思いますけど。
「Blog Table ⭐」の対応
以上の様に、ChromeとFirefoxで標幅の考えた方が異なり、「セル枠」「表枠」の扱いが異なると受け取るしかありません。
「Blog Table ⭐」で表のレイアウトを調整していて、Chromeで非「Fix」モードで枠線幅を変更しても、表全体の幅は変化しませんが、Firefoxでは変化します。 先ずこの操作上の差でブラウザの扱いが異なる事に気が付きます。 どちらのブラウザでも目的のデザインが得られますが、記事に表示された表は、閲覧するブラウザの違いでレイアウトが異なって来ます。
「ver.5.2」の修正で、セル枠幅が「1px」の場合は、全ての条件でブラウザの差は解消しています、このページの例の様にセル枠幅が極端な場合は、ずいぶん違う表示になります。
「Fix」モードの表の場合
Firefoxの表幅の解釈の違いにより、現在の「Blog Table ⭐」の「Fix」モードを指定した表は、Firefoxでは左側がセル枠線幅の1/2欠け、右側は1/2がスクロールしないと見えない表示になります。 セルのレイアウトは「Fix」モードでは固定列幅を指定するので、全体としては影響が少ないと言えます。
非「Fix」モードの表の場合
「Fix」モードと同様、Firefoxでは左側がセル枠線幅の1/2欠け、右側は1/2がスクロールしないと見えない表示になります。 非「Fix」モードでは各セルの幅（列幅）は表幅の自動分配で決まるので、セル幅のレイアウトも異なってしまいます。
枠線幅が極端な場合についての話で、通常は問題になり難い事ですが、もしブラウザでの表示の違いを抑えたいなら、「Fix」モードの表にする事が「Blog Table ⭐」の推奨です。 非「Fix」モードの表の違いを修正するのは、添付「styleタグ」でブラウザによって指定を変える必要があり、必要が少ない事で通常使用にしわ寄せするので、ツールとしては対応しない事にしました。