前端消除滚动条宽度对table 表格的影响

示例地址: https://codepen.io/joshuarule/pen/rjRJog?editors=1000

示例代码:

<div class="container">
<div class="table">
<div class="scrollview">
<table>
<tr>
<th>
test
<div>test</div>
</th>
<th>
test 2
<div>test 2</div>
</th>
<th>
test 3
<div>test 3</div>
</th>
</tr>
<tr>
<td>one</td>
<td>two</td>
<td>three longer</td>
</tr>
<tr>
<td>one</td>
<td>two</td>
<td>three longer</td>
</tr>
<tr>
<td>one</td>
<td>two</td>
<td>three longer</td>
</tr>
<tr>
<td>one</td>
<td>two</td>
<td>three longer</td>
</tr>
<tr>
<td>one</td>
<td>two</td>
<td>three longer</td>
</tr>
<tr>
<td>one</td>
<td>two</td>
<td>three longer</td>
</tr>
<tr>
<td>one</td>
<td>two</td>
<td>three longer</td>
</tr>
</table>
</div>
</div>
</div>

//---------------------------------------

.container {
outline: 1px solid black;
width: 20rem;
}

.table {
position: relative;
padding-top: 2rem;
background-color: blue;
}

.scrollview {
height: 10rem;
overflow: auto;
}

th {
height: 0;
line-height: 0;
padding-top: 0;
padding-bottom: 0;
color: transparent;
border: none;
white-space: nowrap;
}

td, th {
border-bottom: 1px solid #eee;
background: #ddd;
padding: .5rem;
}