戸建て住宅マーケティングAI 開発 (1) ヘッダ固定 & 棒グラフ付 html & css table

集計結果の表示には、主に table を使用しますが、
table毎の情報量が多くなることが予想されますので、css にて

• 行 & 列のヘッダの表示位置を固定
• 数値の下に棒グラフを表示 (excelのdata bar代替)
• 表示域を広げる為、スクロールバーの幅を縮小

することにします。

表示例や、html & css のsrcは、以下に記載の通りですし、
で、デモ環境で確認することも可能です。

にデモ環境も用意しています。

表示例

html & css src

<div class="scroll_tbl2">
  <table>
    <tbody>
      <tr>
        <th></th>
        <th colspan="3">販売中</th>
        <th colspan="3">商談中</th>
        <th colspan="2">売約済</th>
      </tr>
      <tr class="sort_keys">
        <th>市区町村</th>
        <th>数</th>
        <th>百万円</th>
        <th>販売日数</th>
        <th>数</th>
        <th>百万円</th>
        <th>販売日数</th>
        <th>数</th>
        <th>百万円</th>
      </tr>
      <tr>
        <th>
          <div class="col_key">足立区</div>
        </th>
        <td class="graph_bar" style="background-size: 41px 3px;">1,101</td>
        <td class="graph_bar" style="background-size: 10px 3px;">48</td>
        <td class="graph_bar" style="background-size: 6px 3px;">6</td>
        <td class="graph_bar" style="background-size: 50px 3px;">160</td>
        <td class="graph_bar" style="background-size: 23px 3px;">47</td>
        <td class="graph_bar" style="background-size: 8px 3px;">8</td>
        <td class="graph_bar" style="background-size: 47px 3px;">2.9</td>
        <td class="graph_bar" style="background-size: 2px 3px;">43</td>
      </tr>
      <tr>
        <th>
          <div class="col_key">八王子市</div>
        </th>
        <td class="graph_bar" style="background-size: 50px 3px;">1,344</td>
        <td class="graph_bar" style="background-size: 9px 3px;">40</td>
        <td class="graph_bar" style="background-size: 6px 3px;">6</td>
        <td class="graph_bar" style="background-size: 45px 3px;">142</td>
        <td class="graph_bar" style="background-size: 18px 3px;">37</td>
        <td class="graph_bar" style="background-size: 7px 3px;">7</td>
        <td class="graph_bar" style="background-size: 50px 3px;">3.1</td>
        <td class="graph_bar" style="background-size: 1px 3px;">37</td>
      </tr>
      <!--【着】-->
      <tr>
        <th>
          <div class="col_key">新島村</div>
        </th>
        <td class="graph_bar" style="background-size: 0px 3px;">0</td>
        <td class="graph_bar" style="background-size: 0px 3px;">0</td>
        <td class="graph_bar" style="background-size: 0px 3px;">0</td>
        <td class="graph_bar" style="background-size: 0px 3px;">0</td>
        <td class="graph_bar" style="background-size: 0px 3px;">0</td>
        <td class="graph_bar" style="background-size: 0px 3px;">0</td>
        <td class="graph_bar" style="background-size: 0px 3px;">0</td>
        <td class="graph_bar" style="background-size: 0px 3px;">0</td>
      </tr>
    </tbody>
  </table>
</div>

/* th(見出し部)を固定して scroll できる table  */
/* refer to https://csshtml.work/table-scroll/ */
/* .scroll_tbl2 は、ヘッダが 2行               */

.scroll_tbl2 {          width: 100%;
                        height: 250px;
                        overflow: auto;}

.scroll_tbl2 th {       white-space:nowrap;
                        background: #FFF;
                        position: sticky;
                        top:  0;
                        left: 0;}

.scroll_tbl2 td {       padding: 0 10px;
                        white-space:nowrap;
                        text-align: right;}

.scroll_tbl2 th .sub {  font-weight: normal;    }

.scroll_tbl2 tr:nth-child(1) th,
.scroll_tbl2 tr:nth-child(2) th {  font-weight: bold; }

.scroll_tbl2 th div {   width: 100px;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;    }

.scroll_tbl2 tr:first-child th:first-child { z-index: 1; }

.graph_bar {
    background-image:url("/pri/img/graph_bar_blue.svg");
    background-position: 6px 90%;
    background-repeat: no-repeat;
    text-align: right;
}

.scroll_tbl2 .sort_keys th       {cursor: pointer;
                                  width: 65px;}
.scroll_tbl2 .sort_keys th:hover {text-decoration: underline;}
.scroll_tbl2 .col_key            {cursor: pointer;           }
.scroll_tbl2 .col_key:hover      {text-decoration: underline;}

.scroll_tbl2 .station div  { width: 50px;
                             overflow: hidden;
                             text-overflow: ellipsis;
                             white-space: nowrap; }

.scroll_tbl2::-webkit-scrollbar {       width:  8px;
                                        height: 8px;}
.scroll_tbl2::-webkit-scrollbar-thumb { background: #bbb;
                                        border-radius: 4px;}
.scroll_tbl2::-webkit-scrollbar-track { background: #eee;  }