怎么做这样的事情?我从头开始…
我所做的是使用2个表,一个表用于标题,该表始终是静态的,而另一个表呈现单元格,我使用div
固定高度的元素包装了这些单元格,并启用了滚动,overflow-y: auto;
还要确保您使用table-layout: fixed;
固定宽度的td
元素,以便在table
使用不带字符串的情况下不会断线white space
,以便在使用时断开该字符串word-wrap: break-word;
.wrap {
width: 352px;
}
.wrap table {
width: 300px;
table-layout: fixed;
}
table tr td {
padding: 5px;
border: 1px solid #eee;
width: 100px;
word-wrap: break-word;
}
table.head tr td {
background: #eee;
}
.inner_table {
height: 100px;
overflow-y: auto;
}
<div class="wrap">
<table class="head">
<tr>
<td>Head 1</td>
<td>Head 1</td>
<td>Head 1</td>
</tr>
</table>
<div class="inner_table">
<table>
<tr>
<td>Body 1</td>
<td>Body 1</td>
<td>Body 1</td>
</tr>
<!-- Some more tr's -->
</table>
</div>
</div>