【追補】Qiitaでテーブルの内容を折り返さずにスクロール表示する方法

:::note warn
2023年10月以降，Qiita の CSS の仕様が変更されたため，内容を見直しました。
:::

# 目的
下記の記事でテーブルの内容を折り返さずにスクロール表示するテクニックを紹介した。タネはとても簡単で，改行不能なダミー行を数式ブロックで挿入するというもの。問題は挿入するスペースをいくらにすれば良いのか？ということで，下記の記事ではざっくりセルの横幅（の最大値）を全角文字でカウントして，その１割増しくらいで良いという提案だったが，この記事ではもう少しギリギリを攻めてみたい。

https://qiita.com/TETSURO1999/items/fe3675f11ae05f412520

# 実験その１
以下の３つのテーブルの横幅を実測する。
<table>
<caption>全角数字１０字</caption>
<tr><th>１２３４５６７８９０</th></tr>
<tr></tr>
<tr><td></td></tr>
</table>

<table>
<caption>全角数字２０字</caption>
<tr><th>１２３４５６７８９０１２３４５６７８９０</th></tr>
<tr></tr>
<tr><td></td></tr>
</table>

<table>
<caption>全角数字１０字×２</caption>
<tr><th>１２３４５６７８９０</th><th>１２３４５６７８９０</tr>
<tr></tr>
<tr><td></td><td></td></tr>
</table>

以上の表を PC 画面のスクリーンショットを取り，左右端の境界線を含めた幅をカウントした。

<table>
<thead>
<tr><th style="text-align:center;">全角文字</th>
    <th style="text-align:center;">境界線</th>
    <th style="text-align:center;">余白数</th>
    <th style="text-align:center;">横幅</th></tr>
</thead>
<tbody>
<tr><td style="text-align:right;">10字</td>
    <td style="text-align:right;">2本</td>
    <td style="text-align:right;">2個</td>
    <td style="text-align:right;">196px</td></tr>
<tr><td style="text-align:right;">20字</td>
    <td style="text-align:right;">2本</td>
    <td style="text-align:right;">2個</td>
    <td style="text-align:right;">366px</td></tr>
<tr><td style="text-align:right;">20字</td>
    <td style="text-align:right;">3本</td>
    <td style="text-align:right;">4個</td>
    <td style="text-align:right;">391px</td></tr>
</tbody>
</table>

境界線の幅は一本あたり 1px なので，連立方程式を解くと，

- 全角一文字分 17px
- 余白一つ分（片側）12px

となる。

# 実験その２

さて，上記の記事ではスペースを確保するのに em（Mの文字の高さ）という単位を使ったが，CSS では px（ピクセル単位）で margin や padding を指定されている以上，px 単位でスペースを指定したほうがいい。なお，インライン型の数式ブロック `$..$` を用いると，新たに数式ブロックの左右の margin を考慮しなくてはならない。

<table>
<caption>\hspace{300px}</caption>
<tr><th>$\hspace{300px}$</th></tr>
<tr></tr>
<tr><td></td></tr>
</table>

<table>
<caption>\hspace{600px}</caption>
<tr><th>$\hspace{600px}$</th></tr>
<tr></tr>
<tr><td></td></tr>
</table>

<table>
<caption>\hspace{300px}×2</caption>
<tr><th>$\hspace{300px}$</th><th>$\hspace{300px}$</th></tr>
<tr></tr>
<tr><td></td><td></td></tr>
</table>

<table>
<thead>
<tr><th style="text-align:center;">スペース</th>
    <th style="text-align:center;">境界線</th>
    <th style="text-align:center;">余白数</th>
    <th style="text-align:center;">横幅</th></tr>
</thead>
<tbody>
<tr><td style="text-align:right;">300px</td>
    <td style="text-align:right;">2本</td>
    <td style="text-align:right;">2個</td>
    <td style="text-align:right;">329px</td></tr>
<tr><td style="text-align:right;">600px</td>
    <td style="text-align:right;">2本</td>
    <td style="text-align:right;">2個</td>
    <td style="text-align:right;">629px</td></tr>
<tr><td style="text-align:right;">600px</td>
    <td style="text-align:right;">3本</td>
    <td style="text-align:right;">4個</td>
    <td style="text-align:right;">658px</td></tr>
</tbody>
</table>

境界線の幅は一本あたり 1px なので，連立方程式を解くと，余白一つ分（片側）14px となる。

# 実践問題

さて下記のテーブルの折り返しを禁止するため，テーブルの最下行に連結させた単一セルの行を作り，その中にインライン数式ブロックでスペースを挿入して横幅を確保するとします。何 px のスペースを挿入すれば良いでしょうか？

<table>
<caption>実践問題のサンプル（オリジナル）</caption>
<thead><tr><th>あ行</th><th>か行</th><th>さ行</th><th>た行</th><th>な行</th><th>は行</th><th>ま行</th><th>や行</th><th>ら行</th><th>わ行</th></thead>
<tbody><tr><td>あいうえお</td><td>かきくけこ</td><td>さしすせそ</td><td>たちつてと</td><td>なにぬねの</td><td>はひふへほ</td><td>まみむめも</td><td>やゆよ</td><td>らりるえろ</td><td>わゐゑをん</td><tr></tbody>
</table>

# 計算

上記のテーブルの内容を折り返さずに表示された場合の横幅を計算すると 1067px になる。内訳は下記の通り。

<table>
<thead>
<tr><th style="text-align:center;">内訳</th>
    <th style="text-align:center;">横幅</th>
    <th style="text-align:center;">個数</th>
    <th style="text-align:center;">計</th></tr>
</thead>
<tbody>
<tr><td style="text-align:center;">境界線</td>
    <td style="text-align:right;">1px</td>
    <td style="text-align:right;">11本</td>
    <td style="text-align:right;">11px</td></tr>
<tr><td style="text-align:center;">余白</td>
    <td style="text-align:right;">12px</td>
    <td style="text-align:right;">20個</td>
    <td style="text-align:right;">240px</td></tr>
<tr><td style="text-align:center;">全角文字</td>
    <td style="text-align:right;">17px</td>
    <td style="text-align:right;">48字</td>
    <td style="text-align:right;">816px</td></tr>
<tr><td style="text-align:center">合計</td>
    <td></td>
    <td></td>
    <td style="text-align:right;">1067px</td></tr>
</tbody>
</table>

これと等しくなるために必要なスペース幅を計算すると 1037px となった。

<table>
<thead>
<tr><th style="text-align:center;">内訳</th>
    <th style="text-align:center;">横幅</th>
    <th style="text-align:center;">個数</th>
    <th style="text-align:center;">計</th></tr>
</thead>
<tbody>
<tr><td style="text-align:center;">境界線</td>
    <td style="text-align:right;">1px</td>
    <td style="text-align:right;">2本</td>
    <td style="text-align:right;">2px</td></tr>
<tr><td style="text-align:center;">余白</td>
    <td style="text-align:right;">14px</td>
    <td style="text-align:right;">2個</td>
    <td style="text-align:right;">28px</td></tr>
<tr><td style="text-align:center;">スペース</td>
    <td style="text-align:right;">1037px</td>
    <td style="text-align:right;">1</td>
    <td style="text-align:right;">1037px</td></tr>
<tr><td style="text-align:center">合計</td>
    <td></td>
    <td></td>
    <td style="text-align:right;">1067px</td></tr>
</tbody>
</table>

# 結果

ダメです！折り返し禁止できていません！スペース幅が足りません！

<table>
<caption>実践問題のサンプル（失敗例）</caption>
<thead>
<tr><th>あ行</th><th>か行</th><th>さ行</th><th>た行</th><th>な行</th><th>は行</th><th>ま行</th><th>や行</th><th>ら行</th><th>わ行</th></tr>
</thead>
<tbody>
<tr><td>あいうえお</td><td>かきくけこ</td><td>さしすせそ</td><td>たちつてと</td><td>なにぬねの</td><td>はひふへほ</td><td>まみむめも</td><td>やゆよ</td><td>らりるえろ</td><td>わゐゑをん</td></tr>
</tbody>
<tfoot>
<tr><th colspan=10>$\hspace{1037px}$</th></tr>
</tfoot>
</table>

ギリギリだとダメらしい・・・ということで一列あたり 1px ずつ合計 10px 増やして 1047px としてみた。

<table>
<caption>実践問題のサンプル（成功例）</caption>
<thead><tr><th>あ行</th><th>か行</th><th>さ行</th><th>た行</th><th>な行</th><th>は行</th><th>ま行</th><th>や行</th><th>ら行</th><th>わ行</th></thead>
<tbody><tr><td>あいうえお</td><td>かきくけこ</td><td>さしすせそ</td><td>たちつてと</td><td>なにぬねの</td><td>はひふへほ</td><td>まみむめも</td><td>やゆよ</td><td>らりるえろ</td><td>わゐゑをん</td><tr>
</tbody>
<tfoot>
<tr><th colspan=10>$\hspace{1047px}$</th></tr>
</tfoot>
</table>

よっしゃ！成功だ！

# 結論
テーブルの列の数を $\textrm{col}$，各列の文字数（全角換算）の最大値の和を $\textrm{num}$，数式ブロックで挿入するスペースの幅 $\textrm{space}$ とすると，ギリギリのスペース幅は

```math
\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{スペース}}
```

となる。これより

```math
\textrm{space} = 17 \cdot \textrm{num} + 25  \cdot \textrm{col} - 29
```

となるが，余裕を持たせて

```math
\textrm{space} = 17 \cdot \textrm{num} + 26  \cdot \textrm{col} - 29
```

とすべきというのが結論である。