00011-layui表格table列固定宽,且超出屏幕时横向滚动(代码片段)

author author     2022-12-13     547

关键词:

var tableIns = table.render(
   elem:‘#taskOptLogListTable‘
   ,url: ctx+‘/task/taskOptLog/query‘
   ,error:admin.error
   ,cellMinWidth: 80
   ,toolbar: ‘#taskOptLogListTable-toolbar‘
          ,defaultToolbar: [
              title: ‘条件过滤‘ //标题
              ,layEvent: ‘searchDiv‘ //事件名,用于 toolbar 事件中使用
              ,icon: ‘layui-icon-search‘ //图标类名
          ,
              ‘filter‘, ‘print‘, ‘exports‘]
   ,cols: [[
      field:‘userId‘, title: ‘操作人ID‘, align: ‘center‘,width:130 
      ,field:‘content‘, title: ‘操作内容‘, align: ‘center‘,width:130 
      ,field:‘status‘, title: ‘状态‘, align: ‘center‘,width:130,templet:tplStatus
      ,field:‘createTime‘, title: ‘创建时间‘, align: ‘center‘,width:160,templet:tplCreateTime
      ,title:‘操作‘, toolbar: ‘#taskOptLogListTable-bar‘, width:150
   ]]
   ,page: true
   ,limit: 10
   ,limits: layui.setter.limits
   ,done: function(res, curr, count)
   
   ,height: ‘full-110‘
);

其中:width:130 ,固定长
若要自适应,则为 minWidth:130

如何制作比屏幕尺寸宽的表格,可滚动并保持标题行固定?

】如何制作比屏幕尺寸宽的表格,可滚动并保持标题行固定?【英文标题】:Howtomakeatable,whichiswiderthanscreensize,scrollableandkeepheaderrowfixed?【发布时间】:2011-02-0714:23:02【问题描述】:我有一个table,有2列,每列宽800像素。我想在800... 查看详情

HTML:将表格中的两列设置为比其他列宽固定像素数

】HTML:将表格中的两列设置为比其他列宽固定像素数【英文标题】:HTML:settwocolumnsintablewiderthanothersbyfixednumberofpixels【发布时间】:2018-12-1807:16:27【问题描述】:我有一个包含N列(N>=3)的表,我希望列如下:最左边(第1)列... 查看详情

React-Table 列固定宽度破坏了整个表格

】React-Table列固定宽度破坏了整个表格【英文标题】:React-Tablecolumnfixedwidthspoilswholetable【发布时间】:2018-03-0822:22:24【问题描述】:有人可以向我解释一下为什么我不能在FirstName列上设置固定宽度吗?它设置了传递的宽度,但它... 查看详情

html-table表格不被撑开,td某些列宽度固定某些列自适应

 table-layout属性的解释:http://www.w3school.com.cn/cssref/pr_tab_table-layout.asp 1,实现table细边框,设置如下css:table,tabletd,tableth{border:1pxsolid#ff0000;border-collapse:collapse;} 2,table表格宽度固定,同 查看详情

qt表格设置固定某一列列宽

即实现拖动窗口大小时,其它列列宽改变,某一列不变,求教如何实现参考技术A在sheet里选中你要固定列宽的一列,然后找到菜单“行与列”再找的固定列的菜单,输入数字,即可固定列的宽度;本回答被提问者和网友采纳 参... 查看详情

使用 table-layout=auto 固定 HTML 表格中的宽度列

】使用table-layout=auto固定HTML表格中的宽度列【英文标题】:FixedwidthcolumninHTMLtablewithtable-layout=auto【发布时间】:2012-12-2923:48:17【问题描述】:当HTML表格将其table-layout设置为auto时,其列会自动调整大小。鉴于这种情况,有没有办... 查看详情

表格中等宽单元格td之---获取节点下字符串的宽度

   当我们给了table一个固定宽度时或者宽度为100%时,如果不给tr和td固定的width、height。table内部的tr和td会根据其自身的内容自动适应宽度和高度,项目中提出了一个需求,想让table中的某些tr(或者td)的宽度根据这些... 查看详情

vue中实现table的首行首列固定

参考技术A移动端需要表格展示数据时,需要滑动表格实现展示更多数据的目的,固定表格的首行和首列可在查看数据时更加直观。首先将表格分成左右两部分,左边第一列在上下滑动是header部分需要固定;右边第一行在左右滑... 查看详情

表格列固定

<!doctypehtml><htmldir="ltr"lang="zh-CN"><head><metacharset="utf-8"/><title>类似excel的滚动机制,当移动滚动条时固定table的第一行和第一列</title><styletype="text/css">#table-container{ 查看详情

将 2 个表格列宽相互对齐

】将2个表格列宽相互对齐【英文标题】:align2tablecolumnwidthswitheachother【发布时间】:2012-07-2807:19:30【问题描述】:我有2个表,一个在另一个之上,我想将它们的列宽完全对齐,有没有办法做到这一点?尝试了固定表列宽度等没... 查看详情

table固定表头固定列实现横向纵向滚动

...实现表头固定,body滚动,所以把thead单独提出来作为一个表格,然后用定位的方式并成一个完整的表格。sticky是position的新属性值,叫黏性定位。它是一个在static和fixed变化的属性,当你的内容位置没有超过容器范围时,它是正... 查看详情

在 Reactstrap 表中设置固定宽度

...:我正在使用Reactstrap中的Table属性创建一个表。当我创建表格并为第th列输入值时,每列的宽度是不同的,有些非常宽,有些则太窄。我可以调整表格标题以使列宽可调整或全部相同吗?<TablehoverclassName="text-sm 查看详情

HTML表格 - 表格宽度100%时保持列宽比例

】HTML表格-表格宽度100%时保持列宽比例【英文标题】:HTMLTable-Maintaincolumnwidthproportionwhentablewidth100%【发布时间】:2018-02-2502:34:42【问题描述】:默认的html&lt;table&gt;元素似乎可以直接设置我想要/期望的列宽。当我尝试将... 查看详情

自定义table固定列和表头

参考技术A一、实现思路:表格数据中存在合并单元格,网上找了好多列子都没有实现。最后是把一个table拆分为两个table实现的,第一个table(table1)中是需要固定的列及表头(表头只固定前四列和时段流量列,时间列是不固定... 查看详情

如何在 HTML 中为表格内的列提供固定宽度?

】如何在HTML中为表格内的列提供固定宽度?【英文标题】:HowtogivefixedwidthforthecolumnsinsidetableinHTML?【发布时间】:2017-03-3005:23:03【问题描述】:P.S:请在阅读整个问题之前不要将其标记为重复我有一个table,我想为columns提供固定... 查看详情

实现固定表头和表列的table组件

...列,这是原生不支持的。目录实际效果设计思路普通表格固定表头固定表列同时固定表头和表列实际效果table同时支持固定表头和左右两列设计思路这里从普通表格、固定表头、固定表列、同时固定表头表列逐步迭代 查看详情

固定table的表头同时固定列

table表格是我们最常使用的数据显示一种形式,但有时候数据比较多的时候就需要我们去固定表头,固定列。我这里用简单的css样式配合两句js脚本来实现,希望能够去帮到你。<divclass="tableContainer"><divclass="sideTable"><spa... 查看详情

基础固定列宽的表格及示例演示(代码片段)

...支持性也很好的CSS属性,但它却很少为人所知。它改变了表格的渲染方式,并生成一个更加稳定可靠的布局。它就是:tabletable-layout:fixed;table-layout的缺省值是auto,这个属性值及其效果大家十分熟悉。对我来说其效果十分的怪异... 查看详情