tableでoverflow-xで横スクロールするときにtdの幅が自動縮小される

テーブルが画面の幅（ビューポート、親の幅）を超えるとthやtdにwidthを設定していても自動的に縮小される。
これはtableにoverflow-x:scrollを設定して横スクロールにしていた場合に特に問題になって、横長でスクロールにしたいのに勝手に幅が狭くなって横スクロールにならないときがある。

単純な解決方法はtableにwidthを設定することだが、今回の環境では列数が可変なのでtable自体の幅は自動にしたかった。また、tdの幅を変えるたびにtableの幅を計算し直すのもめんどくさい。

そういうときはmax-contentが使えるらしい。

table.scroll
{
  width: max-content;
  overflow-x: scroll;
}

これで、コンテンツ幅に合わせた幅に自動調整してくれる。

めっちゃ試行錯誤した。
最初に試したpaddingで空の幅を設定する方法は一見うまくいった。でもよく見ると高解像度ディスプレイでborderが1pxにならない問題があって、paddingだとbox-sizing:border-box 設定の意味がなくなりpx単位でピッタリ合わせることはできていなかった。
最後はClaude Codeに聞いて解決した。