chromeのテーブルで見出しと本体の縦線がずれる話。

評判によるとChromeはtableの表示がそこそこ変で、Firefoxに比べれば表示のバグとかが多いみたい。まぁ元々がAppleのwebkit由来だから致し方ないのだろうけど、それにしたってどうにかしてくれと思わないでもない。

この前も出てほしくないところにひいてない罫線が出てしまうという状況に出合ったのだが、これもChromeがかなり腰を入れて普及活動をしたからなんだと思う。正直、シェアから言うと無視できない状態にあるんだと思う。それを言ったらモバイルのSafariとかも気にしないといけないんだろうけど、業務アプリなのでスマホとかは考えなくていいのは助かっているところだが、スマホ用の画面は別に作るのが普通なんだろうな。

今回もテーブルの罫線なんだけど、見出し（thead）と本体（tbody）の縦線がずれてしまうという非常に悲しい見栄えの状況です。Excelみたいな格子状の表が、縦線の部分が一直線にならずずれてしまうという、見た感じすぐわかるバグというか仕様だったりします。

普通はヘッダとボディのセルの幅をずらすなんてことはしないんだけど、Firefoxで大丈夫なのにChromeだとばっちりズレてしまう状態になってしまうこともあるようです。きちんとセルの幅を指定してあげているのにもかかわらず、なぜかズレる。デベロッパーツールでセルの幅を見てみても、CSSで指定した以上の数値が出ていて、それだけ幅が広くなれば上下でズレるよなという話。

たぶん、全体の幅が決められていて、その値に引っ張られてセルが横に伸びているんだけど、そんなこと誰も望んでいない。そもそも表全体の幅なんて指定していない。別の部分で全幅指定しているところがあったんだけど、そことは別のテーブルなので連携している意味がわからない。

結局、解決方法としては下のリンクのcolタグの指定をすればいいのだけれど

http://sonic.blue/it/1947

そもそもが幅を指定してあげている上にtable-layout:fixed を指定しているにもかかわらず、きちんと幅が指定できないのは上に書いてある通りで、colspanを使った時点でご破算になってしまう。Firefoxはそれに引っ張られずにきちんとtable-layout:fixedを実行してくれるんだけど、Chromeだとtbodyの前にcolタグをいちいち指定してあげないといけない。非常に面倒だし冗長である。

そもそもズレるような形で表を実装したいと思う人がこの世の中にどれだけいるのかと考えると、仕様というよりもたちの悪いバグの方に近い。意図的にずらしたいと思う人は、table-layout:fixedでずらした状態で指定してあげるだろう。それなのに全体の幅を基準にして値を補正するという意味が分からない。table-layout:fixedとしている時点で、その補正はなしにするのか筋というものだろう。

Safariで確かめたわけじゃないから、これがWebkit由来のものだと断言することはできないんだけど、たぶんGoogleがフォークしたときに修正せずに引きずったまま仕様として残っているだけだと思うんだよね。Googleもテーブルの出来の悪さは認識しているんだろうから、少しは直してくれるといいんだけど、GoogleはUI/UXは必ずしもいい会社ではないので、すぐに直るという事はないんだろうと思う。