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

Question

下面的灰色背景行和白色背景行都是两个单独的表。白色背景表是'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>

灰色表的CSS：

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>

白表的CSS：

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

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