しわだらけのテーブルを広げる.tableのwidthが動作しない場合😷

📌 表の各要素の幅を調整する

1列目には「項目」と同じ名前、2列目には日付(1日~31日)が表示されます.
最初の列の値は、列の幅よりも広く、下に延びていることがわかります.
日付を表示する列にも「日」という言葉が下がっているのが見えます.

🧷 th，td拡大

テーブル上の各ユニットの値を横に伸ばすためにth,tdの幅を拡大しようとする.

style={width: 80px;}

上記の通りですが、適用されません.
これはtable-layoutのデフォルト値がautoであるためです.auto表の幅に合わせてセルの幅を自動調整するため、任意に幅を変更することはできません.
出典:ㅣhttps://developer.mozilla.org/en-US/docs/Web/CSS/table-layout
だから、まずtable-layout: fixedにして、幅を調整します.

custom.css

.table{
       table-layout:fixed;
       width: 100%;
     }

.table th, .table td{
  width: 80px;
}

🧷 結果

日付フォントは横に並んでいますが、最初の列は字が下に下がっていて、幅が増えるにつれて表が画面から離れています.

🧷 最初の列の幅を調整

このため、1列目の幅だけを個別に調整することにした.簡単!以下のコードを書くだけです.

custom.css

th:first-child,
td:first-child {
  width: 250px;
}

🧷 最終結果。jpg

1行目の幅が広くなっているのしか見えません.
セル内のすべての値が横に並んでいます.

📌 1ページにtableを表示

🧷 スクロールの追加

表を1ページに入れるために、横スクロールを追加します.
これも簡単!

 <div class="table-responsive">
          <table>
            ...
          </table>
 </div>

前述したように、表をスクロールして表示できます.

🧷 最終結果。jpg

上の写真を見ると横スクロールの生成が見えます.
ただし、スクロールを使用して右に移動すると、アイテム列が消えてしまうため、どのアイテムの値を区別するのは難しいです.

🧷 最初の列をロック

スクロールが水平に移動すると、最初の列は固定され、各セルの値がどの項目の値であるかを区別します.
これはまた簡単だ.

custom.css

th:first-child,
td:first-child {
  position: sticky;
  width: 250px;
  background-color: white;
  left: 0;
  z-index: 99;
}

先ほど書いたコードにposition・width・backgourd-color・left・z-index項目が追加されています.
コード注:https://ddochea0314.github.io/5/```

🧷 本当の最終結果jpg

最初の列が固定され、スクロールが表示されます.

の最後の部分😇

可読性のためにgetOrDefault(object,0)の値をnull時の"-"に変更します.