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

我有一个要求，有一个表是固定的宽度，其中包括垂直和水平滚动条

我使用了“tablelayout: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>

aaskjdjksdhakv
aaskjdjksdhakv
AASKJDJKDHAKVASDADASDASDADASDASDA
aaskjdjksdhakv
aaskjdjksdhakv
aaskjdjksdhakv
AASKJDJKDHAKVASDADASDASDADASDASDA
aaskjdjksdhakv
aaskjdjksdhakv
aaskjdjksdhakv
aaskjdjksdhakv
aaskjdjksdhakv
aaskjdjksdhakv
aaskjdjksdhakv
aaskjdjksdhakv
aaskjdjksdhakv
aaskjdjksdhakv
aaskjdjksdhakv
aaskjdjksdhakv
aaskjdjksdhakv
aaskjdjksdhakv
aaskjdjksdhakv
aaskjdjksdhakv
aaskjdjksdhakv
aaskjdjksdhakv
aaskjdjksdhakv
aaskjdjksdhakv
aaskjdjksdhakv
aaskjdjksdhakv
aaskjdjksdhakv
aaskjdjksdhakv
aaskjdjksdhakv
aaskjdjksdhakv
AASKJDJKDHAKVASDADASDASDADASDASDA
aaskjdjksdhakv
aaskjdjksdhakv
aaskjdjksdhakv
aaskjdjksdhakv
aaskjdjksdhakv
aaskjdjksdhakv
aaskjdjksdhakv
aaskjdjksdhakv
aaskjdjksdhakv
aaskjdjksdhakv
aaskjdjksdhakv
aaskjdjksdhakv
aaskjdjksdhakv
aaskjdjksdhakv
aaskjdjksdhakv
aaskjdjksdhakv
aaskjdjksdhakv
aaskjdjksdhakv
aaskjdjksdhakv
aaskjdjksdhakv

thead行（tr）不指定给定CSS的

t正文

行（tr）的宽度provided@RandyCasburn有没有类似的方法呢？使用CSS来保持样式一致。你需要选择你的显示布局，网格或表格：以网格为例，还是更像所有tds都是网格的直接子对象（）；）但如果去掉“table layout:fixed”，则表格不适合外部div宽度，而是超出了该宽度，从而在页面上而不是div上创建了一个滚动条