Html 启用overflow-y时，表之间的内容不'；t对齐

下面的灰色背景行和白色背景行是两个单独的表。白色背景表是“overflow-y”属性，如果其中的元素数超过100px，则设置为可滚动

表格的CSS：

table {
border-collapse: collapse;
width: 100%;
}

灰色表格的HTML：

     <div style="padding-bottom: 2px">
         <table>
               <thead>
                   <tr>
                       <th>Start Time</th>
                       <th>End Time</th>
                       <th>User1</th>
                       <th>User2</th>
                       <th></th>
                   </tr>
              </thead>
        </table>
    </div>

th {
    background-color: #E0E0E0;
    font-size: 20px;
    font-weight: bold;
    padding: 8px 0px 8px 0px;
    text-align: left;
    vertical-align: bottom;
    width: 20%;
}

白色表格的HTML：

      <div style="height:95%;overflow:auto">
            <table id="modalTable" style="table-layout: fixed; width: 100%" >
               <tbody>
                    <tr ng-repeat-start="value in MaintenanceModeEvents" class="event">
                        <td>{{'Start Time: MM-dd-yyyy HH:mm:ss'}}</td>
                        <td>{{'End Time: MM-dd-yyyy HH:mm:ss'}}</td>
                        <td>{{'User 1'}}</td>
                        <td>{{'User 2'}}</td>
                        <td><button type="button"</td>
                    </tr>
                </tbody>
            </table>
       </div>

tr.event {
    border-top: 1px solid #808080;
    /*border-bottom: 1px solid #808080;*/
    font-size: 14px;
    padding: 8px 16px;
    text-align: left;
}

---

当白色背景表格的内容不超过100px时，灰色背景表格的标题以20%的间隔均匀分布（视图注释上方有一个th，其中没有任何内容）。我遇到的问题是，当白色背景表格的内容超过100px时，滚动条的宽度会占用白色背景表格中的空间，并且灰色背景表格中的标题不再与白色背景表格对齐，如上所示。我如何处理这个问题？任何帮助都会很好

你能添加你的代码吗请编码，如果你不提供代码很难检查为什么不只是一个表？我需要灰色的标题在滚动第二个表时保持不变。我在将标题附加到与主体相同的表时遇到问题。目前它存在于一个单独的div中，所以当我滚动时，它会停留在页面的顶部。这太过分了，但是如果你没有找到更好的方法，你可以尝试通过删除滚动条宽度来计算标题表的宽度。这里有一篇文章如何做到这一点：你能添加你的代码吗请编码，如果你不提供代码很难检查为什么不只是一个表？我需要灰色的标题在滚动第二个表时保持不变。我在将标题附加到与主体相同的表时遇到问题。目前它存在于一个单独的div中，所以当我滚动时，它会停留在页面的顶部。这太过分了，但是如果你没有找到更好的方法，你可以尝试通过删除滚动条宽度来计算标题表的宽度。下面是一篇如何做到这一点的文章：