有个页面引用了BootStrap前端框架，这个页面是一个table，要放在手机上浏览。这个table的左侧第一列是要固定的。所谓第一列固定，就是在横向滚动的时候第一列一直显示在最左侧。网上查了下方法，现将具体的操作步骤记录下来，方便需要的朋友进行查看。
一、js文件里加入如下代码
1 2 3 4 5 6 7 8 | 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()); }); |
二、样式文件里加入如下代码
1 2 3 4 5 6 7 8 9 10 11 | .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; } } |
大功告成，打开手机浏览器，查看效果。
支付宝扫码打赏 
微信打赏 
