HTMLのtableで小さいセルを表示させる時の設定

当社の簡易IoTシステムでは、Webブラウザで「装置の稼働履歴」を表示することができます。

この「稼働履歴」では、装置の1ヶ月分の稼働履歴を、縦軸を「日」、横軸を「時間」として、時系列に表形式で表示していますが、この表示にはHTMLのtableを使用しています。

この表示を、現在より細かく(例えば、セルの横幅を1ピクセルに)しようとした時に、色々と対応が必要になったので、その内容をまとめておきます。

サンプルとしたHTMLは以下のとおりです。

<table class="test">
<tr>
<td class="title" rowspan=20>テスト</td>
<td class="data" bgcolor="yellow"></td>
<td class="data" bgcolor="yellow"></td>
    :
    : これを、横に1440セル、縦に20セル分くりかえす。
    :
<td class="data" bgcolor="yellow"></td>
</tr>
<tr>
<td></td>
<td colspan="60">0</td>
<td colspan="60">1</td>
    :
<td colspan="60">23</td>
</tr>
</table>

左端に横幅100ピクセルのタイトル、その右横に、縦横1ピクセルのセルを、横に1440個、縦に20個、隙間なしに並べたいと思います(ピクセルアートを描くようなイメージです)。

まずは、CSSとして、以下を準備しました。

.test{
border: solid 1px gray;
}
.data{
width: 1px;
height: 1px;
}
.title{
width: 100px;
}

結果は以下のようになりました。セル間に隙間ができており、タイトルも横幅が狭くなってしまっています。

CSSを、以下のように修正しました。

.test{
border: solid 1px gray;
border-collapse: collapse;
}
.data{
padding:0;
width: 1px;
height: 1px;
}
.title{
padding:0;
width: 100px;
}

結果は以下のようになりました。セル間の隙間はなくなりましたが、タイトルの横幅は狭いままです。

さらに、CSSを以下のように修正し、テーブル全体の横幅を明示的に指定しました。

.test{
border: solid 1px gray;
border-collapse: collapse;
table-layout: fixed;
width: 1540px;
}
.data{
padding:0;
width: 1px;
height: 1px;
}
.title{
padding:0;
width: 100px;
}

これでようやく、所望のとおりに表示できるようになりました。

ところで、当社の簡易IoTシステムでは、以下のブラウザで表示確認を行なっています。

[Windows10]  Edge, Internet Explorer, Chrome
[Mac]  Safari
[Androidスマホ]  Chrome (縦表示, 横表示)
[Androidタブレット]  Chrome (縦表示, 横表示)
[iPhone]  Safari (縦表示, 横表示)
[iPad]  Safari (縦表示, 横表示)

上記のHTMLを、これらのブラウザで表示させてみたところ、Windows10のChromeだけ、表示がおかしくなってしまいました。

このように、同一サイズのセルを並べているにも関わらず、右端の方だけ、幅が狭くなっています。
ディスプレイを外付けに変えたり、ブラウザ表示の拡大/縮小を行ったりすると、その度に挙動が変わり、原因が分かりません。

とりあえず、ノートパソコンのディスプレイに「拡大/縮小なし」で表示させる場合、セル幅を2ピクセルにすると、レイアウトがくずれることなく表示できたので、そのように対処しました。