mounted() { // 在mounted中监听表格scroll事件 this.$refs.scrollTable.addEventListener( 'scroll',(event) => { this.adjustTable(event); }); }, ...... // target中的属性很多,可以通过控制台查看—-clientWidth可以获取除滚动条外的可视区域宽度 adjustTable(event) { this.clientWidth = event.target.clientWidth; },
获取clientWidth,可以调整表头与列对齐(最后一列的宽度不设置)
<table class="cl-body-table" cellpadding="0" cellspacing="0"> <thead :style="{'width':clientWidth+'px'}"> <th style="width:8%"></th> <th class="cl-thead-th"></th> </thead> <tbody></tbody> </table> ....... // 表格滚动 table tbody { display: block; height: 495px; overflow-y: auto; overflow-x: hidden; } // 表头固定 table thead, tbody tr { display: table; table-layout: fixed; /* 使用表格固定算法 必须配合上面一起使用 */ width: 100%; } //列宽度 .cl-thead-th { &.is-not-last { width:13.142857143% // 最后一列不设宽度,才能表头与列对齐 } }
网上最简单的表头与列对齐,由于我第一列的宽度与其他列宽度不同,导致始终不能对齐。因此我采用以下方法无效
// 表格滚动 table tbody { display: block; height: 495px; overflow-y: auto; overflow-x: hidden; } // 表头固定 table thead, tbody tr { display: table; table-layout: fixed; /* 使用表格固定算法 必须配合上面一起使用 */ width: 100%; } // 调整表头与列对齐 table thead { width:calc(100%-2em) }
总结
以上所述是小编给大家介绍的vue中获取滚动table的可视页面宽度调整表头与列对齐(每列宽度不都相同),希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!
问题内容: 鉴于以下几点,我如何使我的最后一列自动调整大小?(最后一列应自动调整内容的宽度。假设我只有1 li元素应该收缩,而我只有3 li元素等等): CSS: 问题答案: 以下将解决您的问题: 灵活的基于类的解决方案 一种更灵活的解决方案是创建一个类,并将其应用于您要确保其内容适合一行的任何列: 然后在您的HTML中:
本文向大家介绍jQuery实现鼠标可拖动调整表格列宽度,包括了jQuery实现鼠标可拖动调整表格列宽度的使用技巧和注意事项,需要的朋友参考一下 实现鼠标可拖动调整表格列宽度 如图: 一、引入文件: 二、TABLE 以上html只是作为Demo 并不是我项目中所实际使用的,并且在测试的时候 也未能实现。郁闷... 三、实现表格可拖动 在项目使用过程中 发现无需引入store.js <th>也无需
我尝试使用,但结果是float。 在PDF上动态计算表宽后,我想获得每个列的绝对宽度(已最大化)。 ----------------编辑---------------------------------- 是否可以在添加表文档之前获取列的宽度?
我做了一个表头和列固定的表。但这里我已经指定了我不想要的头/体的宽度。我用引导类col-md-6(50%宽度)将整个表放在一个div中。但是除非我为thead和tbody硬编码样式,否则它是不起作用的。我希望thead和tbody取父div的宽度。但如果没有指定像素或百分比,则会占用屏幕的全宽。这是我的代码 null null 所有我想要的是使表的响应,而不是像静态400px或50%或类似的东西。
我有一个小问题,试图保持我的.html页面在Chrome的宽度一致,例如,我有一个页面(1)有很多内容溢出了视口(对吗?)高度,所以在页面(1)上有一个垂直滚动条。在第(2)页,我有相同的布局(菜单,div等),但较少的内容,所以没有垂直滚动条在那里。 问题是,在第(1)页上,滚动条似乎将元素稍微向左推了一下(加总宽度?)而所有的一切都以第(2)页为中心 我仍然是HTML/CSS/JS的初学者,我
我这里有这个代码: 如您所见,第二列和第三列前面有一些空白。 有没有办法摆脱这个问题?
问题内容: 以下HTML将在div.container的右侧边缘显示滚动条。 是否可以确定该滚动条的宽度? 问题答案: 此功能应为您提供滚动条的宽度 基本步骤如下: 创建隐藏的div(外部)并获取其偏移宽度 使用CSS溢出属性强制滚动条显示在div(外部)中 创建新的div(内部)并附加到外部,将其宽度设置为“ 100%”并获得偏移宽度 根据收集的偏移量计算滚动条宽度 更新资料 如果在Window
我正在尝试将CardView宽度与屏幕宽度匹配,但CardView的宽度与屏幕宽不匹配。我一次又一次地检查了我的代码,甚至使所有属性的宽度等于匹配的父级。 Recyclerview xml-- 卡片视图xml - 膨胀代码 这是屏幕截图