表格标题和正文宽度未对齐

Question

我有一个表格必须具有固定宽度，同时包含垂直和水平滚动条。

我使用了“ table-layout：fixed”来保持div中包含的表的宽度和“ width = 100％”。但是，如果我不使用“ display：grid”和“ grid-auto-columns”属性，则表内容会重叠。

但是，表标题和表主体单元格的宽度未对齐。

我正在使用以下CSS类

.newTbl {
display: grid;
border-collapse: collapse;
grid-auto-columns: 150px;
table-layout:fixed;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}

.newTbl thead {
    position: sticky;
    top: 0;
    display: table-header-group
}

.newTbl thead tr td {
    border-collapse: collapse;
    border: 1px solid white;
    padding: 5px;
    background-color: #4CAF50;
    color: white;
    z-index: 1;
    padding-top: 12px;
    padding-bottom: 12px;
}

.newTbl tbody tr td {
    border: 1px solid black;
    padding: 5px;
}


.newTbl tbody tr:nth-child(even) {
    background-color: #f2f2f2;
}

.newTbl tbody tr:hover {
    background-color: #ddd;
}

我的HTML代码如下：

                    <div
                                style="width: 100%; overflow: scroll; height: 350px; word-wrap: break-word">

                                <table class="newTbl" id="QueryTable"
                                    style="width: 100%; table-layout: fixed; white-space: nowrap;">
                                    <thead>
                                        <tr>
                                            <td>aaskjdjksdhakv</td>
                                            <td>aaskjdjksdhakv</td>
                                            <td>aaskjdjksdhakvasdadasdasdasdadadasdasdasdasdasda</td>
                                            <td>aaskjdjksdhakv</td>
                                            <td>aaskjdjksdhakv</td>
                                            <td>aaskjdjksdhakv</td>
                                            <td>aaskjdjksdhakvasdadasdasdasdadadasdasdasdasdasda</td>
                                            <td>aaskjdjksdhakv</td>
                                            <td>aaskjdjksdhakv</td>
                                            <td>aaskjdjksdhakv</td>
                                            <td>aaskjdjksdhakv</td>
                                            <td>aaskjdjksdhakv</td>
                                            <td>aaskjdjksdhakv</td>
                                            <td>aaskjdjksdhakv</td>
                                            <td>aaskjdjksdhakv</td>
                                            <td>aaskjdjksdhakv</td>
                                            <td>aaskjdjksdhakv</td>
                                            <td>aaskjdjksdhakv</td>
                                            <td>aaskjdjksdhakv</td>
                                            <td>aaskjdjksdhakv</td>
                                            <td>aaskjdjksdhakv</td>
                                            <td>aaskjdjksdhakv</td>
                                            <td>aaskjdjksdhakv</td>
                                            <td>aaskjdjksdhakv</td>
                                            <td>aaskjdjksdhakv</td>
                                            <td>aaskjdjksdhakv</td>
                                            <td>aaskjdjksdhakv</td>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>

                                            <td>aaskjdjksdhakv</td>
                                            <td>aaskjdjksdhakv</td>
                                            <td>aaskjdjksdhakv</td>
                                            <td>aaskjdjksdhakv</td>
                                            <td>aaskjdjksdhakv</td>
                                            <td>aaskjdjksdhakv</td>
                                            <td>aaskjdjksdhakvasdadasdasdasdadadasdasdasdasdasda</td>
                                            <td>aaskjdjksdhakv</td>
                                            <td>aaskjdjksdhakv</td>
                                            <td>aaskjdjksdhakv</td>
                                            <td>aaskjdjksdhakv</td>
                                            <td>aaskjdjksdhakv</td>
                                            <td>aaskjdjksdhakv</td>
                                            <td>aaskjdjksdhakv</td>
                                            <td>aaskjdjksdhakv</td>
                                            <td>aaskjdjksdhakv</td>
                                            <td>aaskjdjksdhakv</td>
                                            <td>aaskjdjksdhakv</td>
                                            <td>aaskjdjksdhakv</td>
                                            <td>aaskjdjksdhakv</td>
                                            <td>aaskjdjksdhakv</td>
                                            <td>aaskjdjksdhakv</td>
                                            <td>aaskjdjksdhakv</td>
                                            <td>aaskjdjksdhakv</td>
                                            <td>aaskjdjksdhakv</td>
                                            <td>aaskjdjksdhakv</td>
                                            <td>aaskjdjksdhakv</td>


                                        </tr>                   

                                    </tbody>

                                </table>

                            </div>