Htmlで勤怠表を作成したい。レイアウトの仕方が知りたい

質問内容

提示画像ですが以下の勤怠表で以下の実装を行いたいのですが片方がうまくいけば片方ができないといった形でうまく実装できません。
現状の問題は下記のようになっており。仕様は下記の通りなのですがこれはどうやってどんなタグや要素を使って実装するのが適切なのでしょうか？

実装したい仕様

１，スクリプトで最初に日付を表示してその横にfor文等で勤怠表を描画させたい。
※勤怠表は上のタブ朝・午前等の幅と同じ幅
２，この勤怠表は後々javascirptと連携して表をクリックすると入力画面が表示される。

問題点

現状ではテーブルを用いて実装しているのですが日付、勤怠表がともにテーブル内にあるため勤怠表が上のタブ朝・午前等の幅と同じにする方法がない。

調べたこと

問題を治すには日付をテーブルの外に出せば実装できすが、実装したい仕様の２番のようなことをやる際に難しくなる。

知りたいこと

実装したい仕様を実装するにあたりどういったタグを用いて実装するのが適切なのか知りたい
htmlの構造をどうしたらいいのか知りたい。

参考サイト

HTML: http://honttoni.blog74.fc2.com/
フレックスボックスについて：
https://www.webcreatorbox.com/tech/css-flexbox-cheat-sheet

環境

Html5,scss

提示画像A

縮小図

index.html

html
1<!DOCTYPE html>
2<html>
3    <head>
4        <title>test</title>
5       
6        <link rel="stylesheet" type="text/css" href="style.css">
7    </head>
8
9    <body>
10        
11        <!-- 見出し -->
12        <div class="tab">
13            <div class="title">
14
15                <div><h3 class="year">2023</h3></div>
16                <h3>朝・午前 1</h3>
17                <h3>朝・午前 2</h3>
18                <h3>朝・午前 3</h3>
19                <h3>朝・午前 4</h3>
20
21                <h3>夜間・午後 1</h3>
22                <h3>夜間・午後 2</h3>
23                <h3>夜間・午後 3</h3>
24                <h3>夜間・午後 4</h3>            
25            </div>
26        </div>
27    
28        <div class="data">
29
30            <table class="work" border="1"> 
31                <tr  class="date">
32
33                    <th rowspan="8">日付</th>
34                    <th rowspan="8">曜日</th>
35                    <th rowspan="8">予定数</th>
36                        
37                </tr>
38                
39                
40                <tr>
41                    <td class="itemName">現場名</td>
42                    <td colspan="5">成田市公設地方卸売市場</td>
43                </tr>
44            
45                <tr>
46                    <td class="itemName"> 物量</td>
47                    <td colspan="5">各階CD枠16+LSD枠18搬入</td>
48                </tr>
49            
50                <tr>
51                    <td class="itemName">メーカー</td>
52                    <td>鈴木</td>
53            
54                    <td class="itemName">担当者</td>
55                    <td colspan="3">小松ｳｫｰﾙ千葉営</td>
56                </tr>
57            
58                <tr>
59                    <td class="remarks">備考欄</td>
60                    <td colspan="7" class="remarksColumn">テスト備考aaaaaaaaaaaaa</td>
61                </tr>
62
63                <tr>
64                    <td class="itemName">人数</td>
65                    <td>5</td>
66            
67                    <td class="itemName">作業員</td>
68                    <td colspan="3">テスト、テスト</td>
69                    
70                </tr>
71            
72                <tr>
73                    <td class="itemName">朝礼</td>
74                    <td>9:00</td>
75            
76                    <td class="itemName">新規</td>
77                    <td>テスト</td>
78            
79                    <td class="itemName">現担</td>
80                    <td>須藤</td>
81                </tr>
82    
83                <tr>
84                    <td class="itemName">開始時間</td>
85                    <td>返信済み</td>
86            
87                    <td class="itemName">作業時間</td>
88                    <td>8:00</td>
89            
90                    <td class="itemName">職長</td>
91                    <td>テスト</td>
92                </tr>
93            </table>
94        </div>
95    </body>
96
97    <script src="script.js"></script>
98</html>
99

style.scss

scss
1$border_px: 1px;                              //枠のピクセル数
2$border_data: $border_px solid #888;        //枠
3$dateWidth: 100px;                               //日付類の幅
4$yearWidth: $dateWidth * 3;                   //年数の幅
5$workWidth: 800px;                            //仕事データの幅
6$TitlecolumnColor: #00ffff;                 //カラムタイトルカラー
7$columnHeight: 500px;                         //カラムの高さ
8
9body
10{
11    overflow-x: scroll;
12    overflow-y: scroll;
13}
14
15/* ################################## 見出し ################################## */
16.tab
17{
18    text-align: center;
19    display: flex;
20}
21
22//年
23.year
24{
25    width: $yearWidth;
26    border: $border_data;
27    margin: 0;
28}
29
30.title
31{
32    display: flex;
33}
34
35.title > h3
36{
37    
38    margin: 0;
39    width: $workWidth;
40    border: $border_data;
41}
42
43
44.data
45{
46    width: 800px;
47}
48
49/* ################################## 曜日データ ################################## */
50.date > th
51{
52    padding: 0;
53    width: $dateWidth;
54}
55
56/* ################################## 仕事データ ################################## */
57.work
58{
59    width: $workWidth;
60    border-collapse: collapse;
61
62}
63
64.itemName
65{
66    background-color: $TitlecolumnColor;
67}
68
69//備考欄
70.remarks
71{
72    height: 200px;
73    background-color: $TitlecolumnColor;
74    text-align: center;
75}
76
77.remarksColumn
78{
79    vertical-align: top;
80}