2023年10月以降，Qiita の CSS の仕様が変更されたため，内容を見直しました。
目的
下記の記事でテーブルの内容を折り返さずにスクロール表示するテクニックを紹介した。タネはとても簡単で，改行不能なダミー行を数式ブロックで挿入するというもの。問題は挿入するスペースをいくらにすれば良いのか？ということで，下記の記事ではざっくりセルの横幅（の最大値）を全角文字でカウントして，その１割増しくらいで良いという提案だったが，この記事ではもう少しギリギリを攻めてみたい。
実験その１
以下の３つのテーブルの横幅を実測する。
| １２３４５６７８９０ |
|---|
| １２３４５６７８９０１２３４５６７８９０ |
|---|
| １２３４５６７８９０ | １２３４５６７８９０ |
|---|---|
以上の表を PC 画面のスクリーンショットを取り，左右端の境界線を含めた幅をカウントした。
| 全角文字 | 境界線 | 余白数 | 横幅 |
|---|---|---|---|
| 10字 | 2本 | 2個 | 196px |
| 20字 | 2本 | 2個 | 366px |
| 20字 | 3本 | 4個 | 391px |
境界線の幅は一本あたり 1px なので，連立方程式を解くと，
- 全角一文字分 17px
- 余白一つ分（片側）12px
となる。
実験その２
さて，上記の記事ではスペースを確保するのに em（Mの文字の高さ）という単位を使ったが，CSS では px（ピクセル単位）で margin や padding を指定されている以上，px 単位でスペースを指定したほうがいい。なお，インライン型の数式ブロック $..$ を用いると，新たに数式ブロックの左右の margin を考慮しなくてはならない。
| $\hspace{300px}$ |
|---|
| $\hspace{600px}$ |
|---|
| $\hspace{300px}$ | $\hspace{300px}$ |
|---|---|
| スペース | 境界線 | 余白数 | 横幅 |
|---|---|---|---|
| 300px | 2本 | 2個 | 329px |
| 600px | 2本 | 2個 | 629px |
| 600px | 3本 | 4個 | 658px |
境界線の幅は一本あたり 1px なので，連立方程式を解くと，余白一つ分（片側）14px となる。
実践問題
さて下記のテーブルの折り返しを禁止するため，テーブルの最下行に連結させた単一セルの行を作り，その中にインライン数式ブロックでスペースを挿入して横幅を確保するとします。何 px のスペースを挿入すれば良いでしょうか？
| あ行 | か行 | さ行 | た行 | な行 | は行 | ま行 | や行 | ら行 | わ行 |
|---|---|---|---|---|---|---|---|---|---|
| あいうえお | かきくけこ | さしすせそ | たちつてと | なにぬねの | はひふへほ | まみむめも | やゆよ | らりるえろ | わゐゑをん |
計算
上記のテーブルの内容を折り返さずに表示された場合の横幅を計算すると 1067px になる。内訳は下記の通り。
| 内訳 | 横幅 | 個数 | 計 |
|---|---|---|---|
| 境界線 | 1px | 11本 | 11px |
| 余白 | 12px | 20個 | 240px |
| 全角文字 | 17px | 48字 | 816px |
| 合計 | 1067px |
これと等しくなるために必要なスペース幅を計算すると 1037px となった。
| 内訳 | 横幅 | 個数 | 計 |
|---|---|---|---|
| 境界線 | 1px | 2本 | 2px |
| 余白 | 14px | 2個 | 28px |
| スペース | 1037px | 1 | 1037px |
| 合計 | 1067px |
結果
ダメです！折り返し禁止できていません！スペース幅が足りません！
| あ行 | か行 | さ行 | た行 | な行 | は行 | ま行 | や行 | ら行 | わ行 |
|---|---|---|---|---|---|---|---|---|---|
| あいうえお | かきくけこ | さしすせそ | たちつてと | なにぬねの | はひふへほ | まみむめも | やゆよ | らりるえろ | わゐゑをん |
| $\hspace{1037px}$ | |||||||||
ギリギリだとダメらしい・・・ということで一列あたり 1px ずつ合計 10px 増やして 1047px としてみた。
| あ行 | か行 | さ行 | た行 | な行 | は行 | ま行 | や行 | ら行 | わ行 |
|---|---|---|---|---|---|---|---|---|---|
| あいうえお | かきくけこ | さしすせそ | たちつてと | なにぬねの | はひふへほ | まみむめも | やゆよ | らりるえろ | わゐゑをん |
| $\hspace{1047px}$ | |||||||||
よっしゃ！成功だ！
結論
テーブルの列の数を $\textrm{col}$，各列の文字数（全角換算）の最大値の和を $\textrm{num}$，数式ブロックで挿入するスペースの幅 $\textrm{space}$ とすると，ギリギリのスペース幅は
\underbrace{(\textrm{col} + 1)}_{\textsf{境界線}} + \underbrace{\textrm{col} \cdot 2 \cdot 12}_{\textsf{余白}} + \underbrace{17 \cdot \textrm{num}}_{\textsf{文字}} = \underbrace{2}_{\textsf{境界線}} + \underbrace{2 \cdot 14}_{\textsf{余白}} + \underbrace{\textrm{space}}_{\textsf{スペース}}
となる。これより
\textrm{space} = 17 \cdot \textrm{num} + 25 \cdot \textrm{col} - 29
となるが，余裕を持たせて
\textrm{space} = 17 \cdot \textrm{num} + 26 \cdot \textrm{col} - 29
とすべきというのが結論である。