我遇到滚动条显示已禁用的问题。我想要实现的是静态表头(这就是为什么我使用了两个表)和一个可滚动的表体。
HTML:
<div id="segment-content">
<div class="table-header">
<table>
<thead>
<tr class="font-readable">
<th class="hashtag" align="center">#</th>
<th class="in">In</th>
<th class="out">Out</th>
<th class="duration">Duration</th>
<th class="filename">Filename</th>
<th class="unset">Unset</th>
<th class="preview">Preview</th>
<th class="public">Public</th>
</tr>
</thead>
</table>
</div>
<div class="table-body">
<table>
<tbody>
<tr class="font-readable">
<td class="hashtag">1</td>
<td class="in">10-10-2015 11:11:00</td>
<td class="out">10-10-2015 11:11:00</td>
<td class="duration">1800 seg</td>
<td class="filename">10-10-2015-11-11-00-10-10-2015-11-1200.mp4</td> <td class="unset">Unset</td>
<td class="preview">Preview</td>
<td class="public">Public</td>
</tr>
<tr class="font-readable">
<td class="hashtag">2</td>
<td class="in">10-10-2015 11:11:00</td>
<td class="out">10-10-2015 11:11:00</td>
<td class="duration">1800 seg</td>
<td class="filename">10-10-2015-11-11-00-10-10-2015-11-12-00.mp4</td>
<td class="unset">Unset</td>
<td class="preview">Preview</td>
<td class="public">Public</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
CSS
#segment-content {
/*margin-top: 455px;*/
margin-top: 470px;
margin-left: 65px;
margin-right: 65px;
background: #1F1F1F;
}
.table-body {
overflow-y: scroll;
height: 100%;
}
table {
width: 100%;
}
.font-readable {
font-family: Tahoma, Geneva, sans-serif;
font-size: 11px;
font-weight: bold;
text-align: center;
}
.hashtag {
width: 20px;
}
.in, .out {
width: 200px;
}
.duration {
width: 100px;
}
.filename {
width: 400px;
}
我该如何解决这个问题?