HTML/CSS 表格对齐标题和单元格

Question

我在模态中创建了一个响应式表格，该表格使用 insertCell 通过 javascript 填充内容/单元格。标题是固定的，正文向下滚动。表格和模态会根据屏幕高度和宽度自行调整。

但是，我无法让 thead 和 tbody 单元格在表格内相互对齐，我不确定还可以尝试什么，我是否缺少属性或其他什么？我尝试将 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。文本使标题单元格的大小不同。