HTMLとCSSで大きめの表を作成する

Googleスプレッドシートの表のデザインはなるべくそのままで、jsやpythonを使って値を自動的に挿入したい。

元のGoogleスプレッドシートは閲覧のみの制限がかかっている。

自分のサイト内にHTMLとCSSで再現して、jsとpythonが自由に反映できるようにしたい。

※あくまで表の調整のみに触れます。ポインターが合うと値が表示されるjsや自動取得のpythonは別途作成してあるものとします。

①表全体を指定箇所で切ったtableを作成。それをflexで横に並べる。

今回の例では、全体を2列ごとのtableに分け、それを横に並べて表示させることにしました。

①<table class="first-table">
②<table class="second-table">

などとしてこれを必要な回数繰り返して並べ、全体を

<div class="flex-container">
    ①<table class="first-table">
    ②<table class="second-table">

などでラップ。

これにflexをかけて横に長い表を再現しています。

②CSSについて

まず必要になるのは、

table {
    border-collapse: collapse;　/* 重なった線を1本にし、セル同士の隙間を埋める */
    width: auto;
}

td {
    border: 1px solid #dadada;
    padding: 5px 10px;
    text-align: right;
    height: 40px;
    box-sizing: border-box;　/* 太線のpxやpaddingも含めて固定サイズを指定する */
    width: auto;
}

今回の表では横幅を指定する必要はない（はみ出し分は横スクロール）ため、その列内の最大要素に自動で合わせるwidth: auto;に。

heightだけ指定してあれば、中に文字が入っていたり、枠を太線にしてもbox-sizing: border-box; で①と②の表の高さが同じになるようにしています。

②の小さいセルは、min-widthを指定してあげる。

.second-table td {
    min-width: 50px;
}

ロードマップのような各集約線は、cssファイルでの一括処理が難しいため、HTMLの所定<td>にstyleを適用し

<tr>
    <td style="border-right: solid 2px #000;"></td>
    <td style="border-bottom: solid 2px #000;"></td>
</tr>
<tr>
    <td style="border-right: solid 2px #000;"></td>
    <td></td>
</tr>

のような感じで地道に引いてあります。

ここまでの状態で、スマホだと以下のように縮まって表示されます。

これはスマホの仕様で、画面幅の中になるべく収めようとして起きる挙動です。

以下のコードで、画面外にはみ出しても①を縮めないという指定をしてあげます。

.first-table {
    flex-shrink: 0;
}

②はmin-widthですでに固定されているため指定なし。

きれいになりました！

③viewportの設定をする

通常であればスマホでも見やすくするために

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

をHTMLに指定するところですが、横スクロール + 大きな表を見渡したいとなると、拡大だけでなく縮小もできないとかなり見づらくなってしまいます。

そこで一番初めに表示する倍率を下げることで全体を見渡せるように対応させます。

<meta name="viewport" content="width=device-width, initial-scale=0.5">

これで小さなデバイスでも大きな表が見やすくなるようになりました！