- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我有一个简单的 Bootstrap 表,我试图让它自动垂直滚动。这样做的原因是表格将显示在屏幕上并且表格中可能有 10 个或 100 个元素。所以我希望它自动垂直滚动,这样用户就不必手动进行。到达终点后,它会重置并从顶部开始......
到目前为止,这是我的标记:
<div class="table-responsive" style="height: 700px; overflow: auto;">
<table class="table table-bordered table-hover">
<thead>
<tr>
<th style="text-align: left; font-size: 23px;">#</th>
<th style="text-align: left; font-size: 23px;">Name</th>
<th style="text-align: left; font-size: 23px;">Description</th>
<th style="text-align: left; font-size: 23px;">Date</th>
</tr>
</thead>
<tbody>
<tr class="danger">
<td style="text-align: left; font-size: 16px;">1213</td>
<td style="text-align: left; font-size: 16px;">John Doe</td>
<td style="text-align: left; font-size: 16px;">my short description</td>
<td style="text-align: left; font-size: 16px;">Today's Date</td>
</tr>
</tbody>
</table>
</div>
注意:我希望仅使用 HTML
和 CSS
即可实现。
有什么建议吗?
最佳答案
JS(或 jQuery)需要获取实际元素 height
和 scrollHeight
并对这些值执行动画
var $el = $(".table-responsive");
function anim() {
var st = $el.scrollTop();
var sb = $el.prop("scrollHeight")-$el.innerHeight();
$el.animate({scrollTop: st<sb/2 ? sb : 0}, 4000, anim);
}
function stop(){
$el.stop();
}
anim();
$el.hover(stop, anim);
.table-responsive{
height:180px; width:50%;
overflow-y: auto;
border:2px solid #444;
}.table-responsive:hover{border-color:red;}
table{width:100%;}
td{padding:24px; background:#eee;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="table-responsive">
<table class="table table-bordered table-hover">
<thead>
<tr><th>#</th></tr>
</thead>
<tbody>
<tr><td>1</td></tr>
<tr><td>2</td></tr>
<tr><td>3</td></tr>
<tr><td>4</td></tr>
<tr><td>5</td></tr>
<tr><td>6</td></tr>
<tr><td>7</td></tr>
<tr><td>8</td></tr>
<tr><td>9</td></tr>
<tr><td>10</td></tr>
</tbody>
</table>
</div>
关于html - 通过 HTML 和 CSS 使表格自动垂直滚动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36873753/
我是一名优秀的程序员,十分优秀!