htmlにおいて、ヘッダ固定でスクロールできるtableを作成した場合のセルのズレの解消法について

現在、UI側の開発の学習のため、予約アプリの作成を行っています。予約アプリについて、日付と予約状況を確認する部分はテーブルを使用、テーブルはスクロールできるようにしたいと考え画面作成を行いました。
作成したコードは以下の通りです。

javascript
1function createScheduleTableHtml(){
2    var schedule_Html = ""
3    var month_border = checkYearBorder(week);
4    var chosen_year_month = new Date(chosen_year, chosen_month, 1);
5    schedule_Html += '<thead><tr style="text-align: center;">';
6    schedule_Html += '<td class="table_title" rowspan="2">'+ '日付' + '</td>';
7    if (month_border == 7){
8        // 月を跨いでいない場合の「年月」部分の作成
9        schedule_Html += '<td colspan="7">'+ chosen_year + '年' + chosen_month  + '月' + '</td>';
10        schedule_Html += '</tr>'
11    }
12    else if (month_border * 2 > 7){
13        // 月を跨いだ場合、跨ぐ前の「年月」部分の作成
14        var border_front = month_border;
15        var border_end = 7 - month_border;
16        schedule_Html += '<td colspan="' + border_front + '">'+ chosen_year + '年' + chosen_month  + '月' + '</td>';
17        schedule_Html += '<td colspan="' + border_end + '">' + '</td>';
18        schedule_Html += '</tr>'
19    }
20    else{
21        // 月を跨いだ場合、跨いだ後の「年月」部分の作成
22        var border_front = month_border;
23        var border_end = 7 - month_border;
24        chosen_year_month.setMonth(chosen_year_month.getMonth() + 1);
25        schedule_Html += '<td colspan="' + border_front + '">' + '</td>';
26        schedule_Html += '<td colspan="' + border_end + '">' + chosen_year_month.getFullYear() + '年' + chosen_year_month.getMonth() + '月' + '</td>';
27        schedule_Html += '</tr>'
28        chosen_year_month.setMonth(chosen_year_month.getMonth() - 1);
29    }
30    var chosen_data = new Date(chosen_year, chosen_month-1, week[0]);
31    schedule_Html += '<tr style="text-align: center;">';
32    for (let day=0; day < week.length; day ++){
33        chosen_data.setDate(chosen_data.getDate() + day);
34        var day_of_week = chosen_data.getDay()
35        if (day_of_week == 0){
36            //日曜日の場合の「日付、曜日」部分の作成
37            schedule_Html += '<td class="sunday_color">' + week[day] + '<br>(' + WEEKS_NAME[day_of_week] + ')</td>';
38        }
39        else if (day_of_week == 6){
40            // 土曜日の場合の「日付、曜日」部分の作成
41            schedule_Html += '<td class="saturday_color">' + week[day] + '<br>(' + WEEKS_NAME[day_of_week] + ')</td>';
42        }
43        else{
44            // 日曜、土曜以外の「日付、曜日」部分の作成
45            schedule_Html += '<td>' + week[day] + '<br>(' + WEEKS_NAME[day_of_week] + ')</td>';
46        }
47        chosen_data.setDate(chosen_data.getDate() - day);
48    }
49    schedule_Html += '</tr></thead>';
50    schedule_Html += '<tbody>';
51    for (let time=0; time < TIME_SCHEDULE.length; time ++){
52        schedule_Html += '<tr style="text-align: center;">';
53        // 時間表記部分のindexを作成
54        schedule_Html += '<td>' + TIME_SCHEDULE[time] + '</td>';
55        for (let day=0; day < week.length; day ++){
56            var time_check = 0
57            var over_time = TIME_SCHEDULE.length - TREATMENT_TIME[user_order]
58            if (day == 0){
59                time_check = checkCurrentTime(chosen_year, chosen_month, week[day], TIME_SCHEDULE[time]);
60            }
61            if (time_check == 1){
62                // 時間が過ぎてしまい予約できないカラムの表示
63                schedule_Html += '<td>' + 'ー' + '</td>';
64            }
65            else if (reserve_state.get(week[day]).includes(time) == true || time > over_time){
66                // 予約されている、もしくは営業時間外まで入ってしまう場合のカラムの表示
67                schedule_Html += '<td>' + '×' + '</td>';
68            }
69            else if(reserve_state.get(week[day]).includes(time) == false && day < month_border){
70                // 月またぎの前半の部分のカラムの表示
71                schedule_Html += '<td class="can_reserve_td" data-date="' + chosen_year + '/' + chosen_month + '/' + week[day] + '/' + time + '">' + '◯' + '</td>';
72            }
73
74            else{
75                // 月を跨いだ部分のカラムの表示
76                chosen_data.setMonth(chosen_data.getMonth() + 1);
77                schedule_Html += '<td class="can_reserve_td" data-date="' + chosen_data.getFullYear() + '/' + chosen_data.getMonth() + '/' + week[day] + '/' + time + '">' + '◯' + '</td>';
78                chosen_data.setMonth(chosen_data.getMonth() - 1);
79            }
80        }
81    }
82    schedule_Html += '</tr>';
83    schedule_Html += '</tbody>';
84    return schedule_Html
85}
86

上記のコードを動かしたところ、headとbodyで文字数の違いにより幅が合わなくなってしまいました。

そこで、以下のサイトを参考に幅の調整を行いました。
リンク内容
クラスを作成し、tdタブに各クラスを使用することで微調整を行った結果、行と列を合わせることができました。
追加したコードは以下の通りです。

css
1html{
2    font-size: 62.5%;
3}
4/*テーブルの「日付」部分*/
5.table_title{
6    width:100rem;
7}
8
9/*テーブルの「日時と曜日」が表示されてる部分*/
10.week_columns{
11    width: 4rem;
12}
13
14/*「X:XX 〜」の部分*/
15.index_row{
16    width: 19.5rem;
17}
18
19/*「◯、×、-」の部分*/
20.week_row{
21    width: 5rem;
22}

しかし、閲覧するデバイスが変わるとズレが生じてしまいます。デバイスの違いによるズレを解消する方法について、各ディスプレイの画面サイズごとに調節したtable_title等を作成して対応させることはできますが、確認できない端末についての対応ができなくなってしまいます。
スクロール機能を付け加えたテーブルについて動的に行幅を合わせる方法はないのでしょうか。何かヒントになることがあれば教えていただきたいです。よろしくお願いします。