示例地址: 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;
}
