BootStrap自适应Table表格固定左边第一列

最新推荐文章于 2025-06-08 23:39:12 发布

烽火狼烟-秦

最新推荐文章于 2025-06-08 23:39:12 发布

阅读量1.3w

点赞数

分类专栏： Wordpress基础

Wordpress基础专栏收录该内容

18 篇文章

订阅专栏

本文介绍了一种在移动端使用BootStrap框架实现表格左侧第一列固定的方法。通过JavaScript操作DOM复制并调整表格结构，结合CSS样式实现横滚时首列保持不动的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

有个页面引用了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;
    }
}

大功告成，打开手机浏览器，查看效果。