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">} 大功告成，打开手机浏览器，查看效果。 原文地址：https://www.jb51.cc/bootstrap/238335.html 版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [e-mail] 举报，一经查实，本站将立刻删除。 上一篇：twitter-bootstrap – 使用数据表中下一篇：用WINARM编译bootstrap 相关推荐 Bootstrip HTML 查询搜索常用格式模版 Bootstrip HTML 查询搜索常用格式模版 &lt;form class=&quot;form-inline my-3 d-flex align-items-center justify-content-start&quot; method=&quot;get&quot; action=&q 作者：编程之家 时间：2024-07-25 如何在按钮上加红色数字 如何在按钮上加红色数字 您可以使用Bootstrap的badge组件来在按钮上显示红色数字。以下是一个例子： &lt;button class=&quot;btn btn-primary&quot;&gt; My Button &lt;span class=&quot;badge badge-dan 作者：编程之家 时间：2024-07-25 让两个按钮左右排列 要让两个按钮左右排列，你可以使用 Bootstrap 的网格系统将它们放置在同一行中。你可以将按钮放置在两个 col 中，分别占据一定的列宽。以下是你的模板代码做出的修改： {% extends &#39;base.html&#39; %} {% block content %} &lt;div c 作者：编程之家 时间：2024-07-25 status能否设置为布尔值类型，前端采用复选框形式 是的，可以将status设置为布尔类型，这样可以在前端使用复选框形式展示。在模型中的定义可以如下： class Acceptance(models.Model): # ... status = models.BooleanField(default=False) 然后在前端模板中使用{{ form. 作者：编程之家 时间：2024-07-25 Bootstrap 按钮总结 前端工程师一般用的是Bootstrap的框架而不是样式，样式一般自己重新定义class类即可，主要样式要随具体情况而定包括位置任何带有class.btn的元素都会继承圆角灰色按钮的默认外观。但是Bootstrap提供了一些选项来定义按钮的样式。<buttontype="button"class="btn">基本 作者：编程之家 时间：2022-10-08 Python学习-day52-bootstrap 起步导入：<linkrel="stylesheet"href="bootstrap-3.3.7-dist/css/bootstrap.css"><scriptsrc="js/jquery-3.3.1.js"></script><scriptsrc="bootstrap-3.3.7-dist/js/bootstrap.js"></script>屏幕 作者：编程之家 时间：2022-10-08 bootstrap 模态框 （1）modal声明一个模态框（2）modal-dialog定义模态框尺寸（3）modal-lg定义大尺寸模态框（4）modal-sm定义小尺寸模态框（5）modal-header（6）modal-body（7）modal-footer<!doctypehtml><html><head><metacharset="utf-8"><title>模态框<itle><linkrel=&quo 作者：编程之家 时间：2022-10-08 BootStrap图片样式 图片在Bootstrap版本3中，通过为图片添加 .img-responsive 类可以让图片支持响应式布局。其实质是为图片设置了 max-width:100%;、 height:auto; 和 display:block; 属性，从而让图片在其父元素中更好的缩放。如果需要让使用了 .img-responsive 类的图片水平居 作者：编程之家 时间：2022-10-08 bootstrap日期选择 <inputtype="text"class="form-controldatepicker"style="padding:0.375rem0.75rem;"placeholder="开始时间"readonly="true" id="start_time"name="start_time"> $(".datepicke 作者：编程之家 时间：2022-10-08 bootstrap-treeview 使用小记 目录bootstrap-treeview使用小记零、写在前面的话一、功能说明二、特性简述三、实战3.1依赖环境3.2数据源格式3.3Options选项3.4Methods方法3.5Events事件N-2、番外N-1、本文demoN、参考资料bootstrap-treeview使用小记零、写在前面的话p.s.bootst 作者：编程之家 时间：2022-10-08 小编推荐 苹果市值2025年有望达4万亿美元 • 联想拯救者新一代Y700平板通过IMDA认证 • 最新AI生图模型Flux1.1刷屏！添加单反相 • 联发科天玑 9400 频率敲定，3.626GHz 最 • 苹果新品发布会来了！5款产品面临停产 • 佳能R5C Mark II配置曝光：双系统设计， • AI应用的东风，奥特曼不想错过 • 为新品让路！苹果定制版Mac发货延期 热门标签更多 友情链接: ai导航 编程之家 - 我要投稿 - 广告合作 - 联系我们 - 免责声明 - 网站地图 版权所有 © 2018编程之家闽ICP备13020303号-8 微信公众号搜"智元新知"关注 微信扫一扫可直接关注哦！