关于bootstrap table 固定列宽

首先为table 设置 style="table-layout: fixed;"
 <table id="assessStage" data-height="467" data-mobile-responsive="true" style="table-layout: fixed;">
                </table>
然后在下方columns 处设置width
$(‘#assessStage‘).bootstrapTable({
            method: ‘get‘,
            url: "xxx",
            btn: true,
            pagination: true,
            pageSize: 10,
            pageNumber: 1,
            pageList: [10, 15, 30],//分页步进值
            striped: true,
            dataField: "list",
            iconSize: ‘outline‘,
            icons: {
                refresh: ‘glyphicon-repeat‘,
                toggle: ‘glyphicon-list-alt‘,
                columns: ‘glyphicon-list‘
            },
            columns: [
                [
                    {
                        field: ‘student_name‘,
                        title: ‘姓名‘,
                        align: ‘center‘,
                        colspan: 1
                        ,width:100
                    },
                    {
                        field: ‘hospital_name‘,
                        title: ‘带教单位‘,
                        align: ‘center‘,
                        colspan: 1
                        ,width:200
                    },
                    {
                        field: ‘teacher_name‘,
                        title: ‘指导老师‘,
                        align: ‘center‘,
                        colspan: 1
                        ,width:100
                    },
                    {
                        field: ‘start_time‘,
                        title: ‘开始时间‘,
                        align: ‘center‘,
                        colspan: 1,
                        width:100
                    }
                ]
            ]
        });

原文地址:https://www.cnblogs.com/zhuyeshen/p/11981916.html

时间: 2024-08-29 02:15:10

关于bootstrap table 固定列宽的相关文章

JS组件系列——Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案

前言:最近项目里面需要用到表格的冻结列功能,所谓“冻结列”,就是某些情况下表格的列比较多,需要固定前面的几列,后面的列滚动.遗憾的是,bootstrap table里自带的fixed column功能有一点bug,于是和同事讨论该如何解决,于是就有了这篇文章. 一.起因回顾 最近项目里面有一个表格需求,该表格列是动态产生的,而且列的数量操作一定值以后就会出现横向滚动条,滚动的时候需要前面几列固定.也就是所谓的excel的冻结列功能.该如何实现呢?不用多说,当然是查文档,于是找到了这篇http:/

【基础】固定列宽的表格及示例演示

引言 对我来说,table 有一个非常有用,支持性也很好的 CSS 属性,但它却很少为人所知.它改变了表格的渲染方式,并生成一个更加稳定可靠的布局. 它就是: table { table-layout: fixed; } table-layout的缺省值是 auto,这个属性值及其效果大家十分熟悉.对我来说其效果十分的怪异,具体见如下演示: 查看演示效果 fixed属性值 应用 table-layout: fixed之后,查看演示效果,可以得出如下结论: 给单元格指定的宽度值生效 overflo

HTML+CSS+JS实现TABLE固定列(常见浏览器兼容)的最佳实践

BS架构的企业级应用中,当一个表格列数较多时,用户一个常见的需求就是把前面几个重要的列固定住,这样拖动滚动条时固定的列会方便用户查看数据,用户体验很好.一些重量级的JS组件库也都有这个功能,那么有没有更简单的方法实现这个功能呢? 这个需求常见的解决方案是使用表格拼接的方法,这个方案如果要制作静态的网页,或者功能简单的动态页面,逻辑比较简单,技术上也不复杂,很容易实现,但是如果要做成组件,动态功能较多的话,就需要写大量的冗余代码,难以维护,甚至于一个简单的功能,都需要些很多的代码,比如事件处理等,

CSS表格固定列宽

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

table 固定列头方法(CSS)

table tbody { display: block; height: 195px; overflow-y: scroll; } table thead, tbody tr { display: table; width: 100%; table-layout: fixed; } table thead { width: calc( 100% - 1em ); } table thead th { background: #ccc; }

ivew Table 固定列设置后,底部拖拽的横轴被覆盖拉不动

原因:设置了max-height=500px:表格最大高度,单位 px,设置后,如果表格内容大于此值,会固定表头.去掉即可. 原文地址:https://www.cnblogs.com/phpli/p/11756362.html

bootstrap Table实现列排序

一.前台部分 1.列部分需加上 sortable:true ,例如下 2. 发送请求参数中加上排序名称(sortName)和排序方式(sortOrder)   二. 后台部分,正常接收就行,需要注意的是mapper中写sql语句时,参数的传递方式 1.#{} 用于在SQL语句中获取用户传递的参数. 该获取方式类似于JDBC中PreparedStatement方式下的SQL语句. 会使用?作为占位符, 动态进行参数的绑定 打印出的日志如下, 结果是排序效果无效 2.${} 类似于JDBC中的Sta

Java 设置Excel自适应行高、列宽

在excel中,可通过设置自适应行高或列宽自动排版,是一种比较常用的快速调整表格整体布局的方法.设置自适应时,可考虑2种情况: 1.固定数据,设置行高.列宽自适应数据(常见的设置自适应方法) 2.固定列宽,缩小数据字体大小适应列宽 本文将通过java程序来介绍具体的自适应设置方法.   工具:Free Spire.XLS for Java (免费版) 注:可通过官网下载包,并解压将lib文件夹下的jar文件导入java程序:或者通过maven仓库下载并导入. 参考如下导入效果: Java 代码示

Bootstrap Table列宽拖动的方法

在之前做过的一个web项目中,前端表格是基于jQuery和Bootstrap Table做的,客户要求能利用拖动改变列宽,为了总结和备忘,现将实现的过程记录如下: 1.Bootstrap Table可拖动,需要用到它的Resizable扩展插件,具体可见bootstrap-table的官方文档链接:http://bootstrap-table.wenzhixin.net.cn/zh-cn/extensions/ 进入之后,找到Resizable插件,点击Home进入github可以找到详细的用法