我专门针对移动设备,因此我有一个 Bootstrap 响应表。它只是一个带有引导类“table-responsive”的 div 和一个嵌套在类“table table-striped table-bordered table-hover table-condensed”中的表格。
有没有简单的方法可以确保第一列固定(不水平滚动)?在移动设备上,很可能每次都会滚动,但第一列包含本质上是表标题的内容。
如果您仅针对移动设备,那么这可能适合您:您可以克隆表格中的第一列并应用position:absolute
因此,当您滚动表格的其余部分时,它会显示在“前面”。
为此,您需要一些基本的 jquery 代码和自定义 CSS 类:
jQuery
$(function(){
var $table = $('.table');
//Make a clone of our table
var $fixedColumn = $table.clone().insertBefore($table).addClass('fixed-column');
//Remove everything except for first column
$fixedColumn.find('th:not(:first-child),td:not(:first-child)').remove();
//Match the height of the rows to that of the original table's
$fixedColumn.find('tr').each(function (i, elem) {
$(this).height($table.find('tr:eq(' + i + ')').height());
});
});
CSS
.table-responsive>.fixed-column {
position: absolute;
display: inline-block;
width: auto;
border-right: 1px solid #ddd;
background-color: #fff; /* bootstrap v3 fix for fixed column background color*/
}
@media(min-width:768px) {
.table-responsive>.fixed-column {
display: none;
}
}
这是一个工作演示 http://jsfiddle.net/4XG7T/3/对于这种方法
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)