HTML / CSS таблица выравнивания заголовка и ячеек

Question

Я создал адаптивную таблицу в модальном режиме, которая заполняет содержимое / ячейки с помощью JavaScript с использованием insertCell. Заголовок зафиксирован, а тело прокручивается вниз. Таблица и модальность настраиваются в соответствии с высотой и шириной экрана.

Тем не менее, у меня возникают проблемы с выравниванием ячеек и телосложения между собой внутри таблицы, я не уверен, что еще можно попробовать, я пропустил атрибут или что-то еще? Я попытался установить ячейки tr и td одинаковой ширины, но безуспешно.

Вот изображение проблемы (показать красные кружки, возможно, придется увеличить?): И изображение ячеек таблицы не выравнивается:

.modal-full {
    min-width: calc(100vw - 380px);
    width: calc(100vw - 380px);
    min-height: 80%;
    margin: 0;
    top: 3%;
    left: 10%;
}

.modal-content {
    height: calc(100vh - 120px);
    overflow: hidden;
    background-color: #EFEFEF;
}

.modal-dialog-center {
    margin-top: 3%;
}

.modal-backdrop {
    background-color: darkgrey;
}

.modal-body {
    background-color: #EFEFEF;
}

.modal-header {
    background-color: #EFEFEF;
}

.modal-footer {
    background-color: #edf1f5;
}

.tbody2 {
    overflow-y: scroll;
    height: calc(100vh - 280px);
    position: absolute;
}

.tbody2 tr td {
    width: calc(100vw - 5px);
}

.thead2 tr th {
    width: calc(100vw - 5px);
}

.thead2 tr th:first-child {
   width: 140px;
   min-width: 140px;
}

.tbody2 tr td:first-child {
    width: 140px;
    min-width: 140px;
}

<div id="ScheduleOverviewModal" class="modal fade" role="dialog">

    <div class="modal-dialog modal-full">
        <div class="modal-content" style="overflow:auto;">
            <div class="modal-body">
                <div class="col-lg-12">
                    <div class="col-lg-3">
                        <div class="row">
                            <label class="col-form-label">Month</label>
                            <label class="col-form-label" style="margin-left:90px;">Year</label>
                        </div>
                        <div class="row">
                            <div style="width:120px;">
                                <select class="custom-select" id="inputScheduleOverviewMonth" style="width:110px;" onchange="DownloadScheduleOverview();">
                                    <option value="01">January</option>
                                    <option value="02">February</option>
                                    <option value="03">March</option>
                                    <option value="04">April</option>
                                    <option value="05">May</option>
                                    <option value="06">June</option>
                                    <option value="07">July</option>
                                    <option value="08">August</option>
                                    <option value="09">September</option>
                                    <option value="10">October</option>
                                    <option value="11">November</option>
                                    <option value="12">December</option>
                                </select>
                                <script>
                                    var d = new Date();
                                    var n = d.getMonth() + 1;
                                    document.getElementById("inputScheduleOverviewMonth").value = String(n).padStart(2, '0');
                                </script>
                            </div>
                            <div class="col-lg-1">
                                <select class="custom-select" id="inputScheduleOverviewYear" style="width:110px;" onchange="DownloadScheduleOverview();">
                                    <option value="2019">2019</option>
                                </select>
                                <script>
                                    var d = new Date();
                                    var n = d.getFullYear();
                                    document.getElementById("inputScheduleOverviewYear").value = n;
                                </script>
                            </div>
                        </div>
                    </div>
                </div>
                <br />
                <div class="loader2" id="ScheduleLoad">
                    <span class="loader-text2" id="loader-text2" style="font-size:22px;">
                        <i class="fa fa-refresh fa-spin" style="color:black;"></i> Gathering Schedule..
                    </span>
                </div>
                <div id="ScheduleDiv" style="display:none;">
                    <table class="table tablesaw table-bordered" id="ScheduleTable">
                        <thead style="background-color: #a0aec4; color: #ffffff;" class="thead2">
                            <tr>
                                <th></th>
                                @for (var i = 1; i <= 31; i++)
                                {
                                    <th class="text-center" id="@("Day" + i)"></th>
                                }
                            </tr>
                        </thead>
                        <tbody id="ScheduleTableBody" class="tbody2"></tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

Answer 1

Я исправил проблему, в своем коде JavaScript я устанавливал innerHTML каждого текста заголовков.Текст делал ячейки заголовка другого размера.