有个页面引用了BootStrap前端框架,这个页面是一个table,要放在手机上浏览。这个table的左侧第一列是要固定的。所谓第一列固定,就是在横向滚动的时候第一列一直显示在最左侧。网上查了下方法,现将具体的操作步骤记录下来,方便需要的朋友进行查看。
一、js文件里加入如下代码
var $table = $('.table');
var $fixedColumn = $table.clone().insertBefore($table).addClass('fixed-column');
$fixedColumn.find('th:not(:first-child),td:not(:first-child)').remove();
$fixedColumn.find('tr').each(function (i, elem) {
$(this).height($table.find('tr:eq(' + i + ')').height());
});
二、样式文件里加入如下代码
.table-responsive>.fixed-column {
position: absolute;
display: inline-block;
width: auto;
border-right: 1px solid #ddd;
}
@media(min-width:768px) {
.table-responsive>.fixed-column {
display: none;
}
}
大功告成,打开手机浏览器,查看效果。