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

有个页面引用了BootStrap前端框架，这个页面是一个table，要放在手机上浏览。这个table的左侧第一列是要固定的。所谓第一列固定，就是在横向滚动的时候第一列一直显示在最左侧。网上查了下方法，现将具体的操作步骤记录下来，方便需要的朋友进行查看。

一、js文件里加入如下代码

Crayon-5c891c9a5032f786714382" class="Crayon-Syntax Crayon-theme-classic Crayon-font-monaco Crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouSEOver" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">

Crayon-toolbar" data-settings=" mouSEOver overlay hide delay" style="font-size: 12px !important;height: 18px !important; line-height: 18px !important;">Crayon-title">

Crayon-tools" style="font-size: 12px !important;height: 18px !important; line-height: 18px !important;">

Crayon-button Crayon-nums-button" title="Toggle Line Numbers">

Crayon-button-icon">

Crayon-button Crayon-plain-button" title="Toggle Plain Code">

Crayon-button-icon">

Crayon-button Crayon-wrap-button" title="Toggle Line Wrap">

Crayon-button-icon">

Crayon-button Crayon-expand-button" title="Expand Code">

Crayon-button-icon">

Crayon-button Crayon-copy-button" title="copy">

Crayon-button-icon">

Crayon-button Crayon-popup-button" title="Open Code In New Window">

Crayon-button-icon">

Crayon-language">JavaScript

Crayon-info" style="min-height: 16.8px !important; line-height: 16.8px !important;">

Crayon-plain-wrap">Crayon</a>-plain print-no" data-settings="dblclick" readonly style="-moz-<a href="https://www.jb51.cc/tag/tabsize/" target="_blank" class="keywords">tab-size</a>:4; -o-<a href="https://www.jb51.cc/tag/tabsize/" target="_blank" class="keywords">tab-size</a>:4; -webkit-<a href="https://www.jb51.cc/tag/tabsize/" target="_blank" class="keywords">tab-size</a>:4; <a href="https://www.jb51.cc/tag/tabsize/" target="_blank" class="keywords">tab-size</a>:4; font-size: 12px !important; line-height: 15px !important;"> var $table = $('.table'); var $fixedColumn = $table.clone().insertBefore($table).addClass('fixed-column'); $fixedColumn.find('th:not(:f<a href="https://www.jb51.cc/tag/irs/" target="_blank" class="keywords">irs</a>t-child),td:not(:f<a href="https://www.jb51.cc/tag/irs/" target="_blank" class="keywords">irs</a>t-child)').remove(); $fixedColumn.find('tr').each(function (i,elem) { $(this).height($table.find('tr:eq(' + i + ')').height()); });

Crayon-main" style="">Crayon-table">Crayon-row">

Crayon-nums " data-settings="show"> Crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"> Crayon-num" data-line="Crayon-5c891c9a5032f786714382-1">1 Crayon-num Crayon-striped-num" data-line="Crayon-5c891c9a5032f786714382-2">2 Crayon-num" data-line="Crayon-5c891c9a5032f786714382-3">3 Crayon-num Crayon-striped-num" data-line="Crayon-5c891c9a5032f786714382-4">4 Crayon-num" data-line="Crayon-5c891c9a5032f786714382-5">5 Crayon-num Crayon-striped-num" data-line="Crayon-5c891c9a5032f786714382-6">6 Crayon-num" data-line="Crayon-5c891c9a5032f786714382-7">7 Crayon-num Crayon-striped-num" data-line="Crayon-5c891c9a5032f786714382-8">8 Crayon-code"> Crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"> Crayon-line" id="Crayon-5c891c9a5032f786714382-1">Crayon-t">varCrayon-h"> Crayon-sy">$Crayon-v">tableCrayon-h"> Crayon-o">=Crayon-h"> Crayon-sy">$Crayon-sy">(Crayon-s">'.table'Crayon-sy">)Crayon-sy">; Crayon-line Crayon-striped-line" id="Crayon-5c891c9a5032f786714382-2">Crayon-t">varCrayon-h"> Crayon-sy">$Crayon-v">fixedColumnCrayon-h"> Crayon-o">=Crayon-h"> Crayon-sy">$Crayon-v">tableCrayon-sy">.Crayon-e">cloneCrayon-sy">(Crayon-sy">)Crayon-sy">.Crayon-e">insertBeforeCrayon-sy">(Crayon-sy">$Crayon-v">tableCrayon-sy">)Crayon-sy">.Crayon-e">addClassCrayon-sy">(Crayon-s">'fixed-column'Crayon-sy">)Crayon-sy">; Crayon-line" id="Crayon-5c891c9a5032f786714382-3"> Crayon-line Crayon-striped-line" id="Crayon-5c891c9a5032f786714382-4">Crayon-sy">$Crayon-v">fixedColumnCrayon-sy">.Crayon-e">findCrayon-sy">(Crayon-s">'th:not(:first-child),td:not(:first-child)'Crayon-sy">)Crayon-sy">.Crayon-e">removeCrayon-sy">(Crayon-sy">)Crayon-sy">; Crayon-line" id="Crayon-5c891c9a5032f786714382-5"> Crayon-line Crayon-striped-line" id="Crayon-5c891c9a5032f786714382-6">Crayon-sy">$Crayon-v">fixedColumnCrayon-sy">.Crayon-e">findCrayon-sy">(Crayon-s">'tr'Crayon-sy">)Crayon-sy">.Crayon-st">eachCrayon-sy">(Crayon-t">functionCrayon-h"> Crayon-sy">(Crayon-v">iCrayon-sy">,Crayon-h"> Crayon-v">elemCrayon-sy">)Crayon-h"> Crayon-sy">{ Crayon-line" id="Crayon-5c891c9a5032f786714382-7">Crayon-h">Crayon-sy">$Crayon-sy">(Crayon-r">thisCrayon-sy">)Crayon-sy">.Crayon-e">heightCrayon-sy">(Crayon-sy">$Crayon-v">tableCrayon-sy">.Crayon-e">findCrayon-sy">(Crayon-s">'tr:eq('Crayon-h"> Crayon-o">+Crayon-h"> Crayon-v">iCrayon-h"> Crayon-o">+Crayon-h"> Crayon-s">')'Crayon-sy">)Crayon-sy">.Crayon-e">heightCrayon-sy">(Crayon-sy">)Crayon-sy">)Crayon-sy">; Crayon-line Crayon-striped-line" id="Crayon-5c891c9a5032f786714382-8">Crayon-sy">}Crayon-sy">)Crayon-sy">; 二、样式文件里加入如下代码 Crayon-5c891c9a50338552964321" class="Crayon-Syntax Crayon-theme-classic Crayon-font-monaco Crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouSEOver" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;"> Crayon-toolbar" data-settings=" mouSEOver overlay hide delay" style="font-size: 12px !important;height: 18px !important; line-height: 18px !important;">Crayon-title"> Crayon-tools" style="font-size: 12px !important;height: 18px !important; line-height: 18px !important;"> Crayon-button Crayon-nums-button" title="Toggle Line Numbers"> Crayon-button-icon"> Crayon-button Crayon-plain-button" title="Toggle Plain Code"> Crayon-button-icon"> Crayon-button Crayon-wrap-button" title="Toggle Line Wrap"> Crayon-button-icon"> Crayon-button Crayon-expand-button" title="Expand Code"> Crayon-button-icon"> Crayon-button Crayon-copy-button" title="copy"> Crayon-button-icon"> Crayon-button Crayon-popup-button" title="Open Code In New Window"> Crayon-button-icon"> Crayon-language">CSS Crayon-info" style="min-height: 16.8px !important; line-height: 16.8px !important;"> Crayon-plain-wrap">.fixed-column { position: absolute; <a href="https://www.jb51.cc/tag/dis/" target="_blank" class="keywords">dis</a>play: inline-block; width: auto; border-right: 1px solid #ddd; } @media(min-width:768px) { .table-responsive>.fixed-column { <a href="https://www.jb51.cc/tag/dis/" target="_blank" class="keywords">dis</a>play: none; } } Crayon-main" style="">Crayon-table">Crayon-row"> Crayon-nums " data-settings="show"> Crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"> Crayon-num" data-line="Crayon-5c891c9a50338552964321-1">1 Crayon-num Crayon-striped-num" data-line="Crayon-5c891c9a50338552964321-2">2 Crayon-num" data-line="Crayon-5c891c9a50338552964321-3">3 Crayon-num Crayon-striped-num" data-line="Crayon-5c891c9a50338552964321-4">4 Crayon-num" data-line="Crayon-5c891c9a50338552964321-5">5 Crayon-num Crayon-striped-num" data-line="Crayon-5c891c9a50338552964321-6">6 Crayon-num" data-line="Crayon-5c891c9a50338552964321-7">7 Crayon-num Crayon-striped-num" data-line="Crayon-5c891c9a50338552964321-8">8 Crayon-num" data-line="Crayon-5c891c9a50338552964321-9">9 Crayon-num Crayon-striped-num" data-line="Crayon-5c891c9a50338552964321-10">10 Crayon-num" data-line="Crayon-5c891c9a50338552964321-11">11 Crayon-code"> Crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"> Crayon-line" id="Crayon-5c891c9a50338552964321-1">.fixed-column Crayon-sy">{ Crayon-line Crayon-striped-line" id="Crayon-5c891c9a50338552964321-2">Crayon-h">Crayon-e ">positionCrayon-sy">:Crayon-h"> Crayon-i ">absoluteCrayon-sy">; Crayon-line" id="Crayon-5c891c9a50338552964321-3">Crayon-h">Crayon-e ">displayCrayon-sy">:Crayon-h"> Crayon-i ">inline-blockCrayon-sy">; Crayon-line Crayon-striped-line" id="Crayon-5c891c9a50338552964321-4">Crayon-h">Crayon-e ">widthCrayon-sy">:Crayon-h"> Crayon-i ">autoCrayon-sy">; Crayon-line" id="Crayon-5c891c9a50338552964321-5">Crayon-h">Crayon-e ">border-rightCrayon-sy">:Crayon-h"> Crayon-i ">1pxCrayon-h"> Crayon-i ">solidCrayon-h"> Crayon-i ">#dddCrayon-sy">; Crayon-line Crayon-striped-line" id="Crayon-5c891c9a50338552964321-6">Crayon-sy">} Crayon-line" id="Crayon-5c891c9a50338552964321-7">Crayon-n">@media(min-width:768px) Crayon-sy">{ Crayon-line Crayon-striped-line" id="Crayon-5c891c9a50338552964321-8">Crayon-h">.fixed-column Crayon-sy">{ Crayon-line" id="Crayon-5c891c9a50338552964321-9">Crayon-h">Crayon-e ">displayCrayon-sy">:Crayon-h"> Crayon-i ">noneCrayon-sy">; Crayon-line Crayon-striped-line" id="Crayon-5c891c9a50338552964321-10">Crayon-h">Crayon-sy">} Crayon-line" id="Crayon-5c891c9a50338552964321-11">Crayon-sy">} 大功告成，打开手机浏览器，查看效果。 相关文章 Bootstrip HTML 查询搜索常用格式模版 Bootstrip HTML 查询搜索常用格式模版 &lt;form class=&... 如何在按钮上加红色数字 如何在按钮上加红色数字 您可以使用Bootstrap的badge组件来在... 让两个按钮左右排列 要让两个按钮左右排列，你可以使用 Bootstrap 的网格系统将它... status能否设置为布尔值类型，前端采用复选框形式 是的，可以将status设置为布尔类型，这样可以在前端使用复选... Bootstrap 按钮总结 前端工程师一般用的是Bootstrap的框架而不是样式，样式一般自... Python学习-day52-bootstrap 起步导入：<linkrel="stylesheet"href="b... Copyright © 2018 编程之家. 当前版本 V7.0.16 编程之家 版权所有 闽ICP备13020303号-8