首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何纯CSS实现标题栏、表格水平滚动垂直滚动

有些报表会很宽,浏览器水平放不下,需要水平滚动显示,这个可以设置overflow-y:hidden实现,很基本实现,没什么难度。但是,如果同时希望垂直滚动时候,表格头是固定。此时该如何实现呢?...box{display:flex;flex-direction:column;}.top{height:30px;}.content{flex:1}但是实现代码比起  :《纯CSS实现标题栏、表格水平滚动垂直滚动...这里有一个特别注意地方,就是需要设置 top: 0;单独设置position: sticky;  无效。...https://codepen.io/lujun-zhou/pen/MWmGMyP如果使用 绝对定位实现,这个其实没有啥好说。...转载本站文章《如何纯CSS实现标题栏、表格水平滚动垂直滚动》,请注明出处:https://www.zhoulujun.cn/html/webfront/SGML/html5/2021_0731_8650

1.5K00
您找到你想要的搜索结果了吗?
是的
没有找到

车辆轨迹回放如何实现轨迹信息表格自动滚动

轨迹跟踪适用于车载监控场景,基于车内车载监控装置,可以实时记录车辆位置、行驶轨迹等信息,并且轨迹回放,能对车辆行驶路线过程进行回放,掌握车辆历史行踪。...该功能对于车辆、车队管理具有十分重要意义。 今天和大家分享下在该功能研发一点技巧:如何实现表格自动滚动。...需求: 轨迹信息表格为了能和地图上运动轨迹点同步运动,需要滚动到对应列并展示高亮。 实现方式: 1)表格标签上加入ref,方便操作Dom元素。...2)编写操作表格滚动函数,函数传入表格列表下标。这里已经知道列表高度为38,当传入对应下标并乘38,赋值给滚动高度。表格SetCurentRow为设置表格高亮方法。...3)当地图上点位运动后会传入下标执行tableTop函数,表格就会自动滚动到对应列。 预览效果: 作为视频监控行业重要分支,车载视频监控是交通监控领域重要应用。

1.7K20

CSS大部分属性汇总

设置元素中空白处理方式 word-spacing 设置字间距 字体类属性 属性 描述 font 一个声明设置所有的字体属性 font-family 指定文本字体系列 font-size 指定文本字体大小...collapse 当在表格元素中使用时,此值删除一行或一列,它不会影响表格布局。被行或列占据空间会留给其他内容。 inherit 规定应该从父元素继承 visibility 属性值。...table-row 此元素会作为一个表格行显示 table-column-group 此元素会作为一个或多个列分组来显示 table-column 此元素会作为一个单元格列显示 table-cell...此元素会作为一个表格单元格显示 table-caption 此元素会作为一个表格标题显示 inherit 规定应该从父元素继承 display 属性值。...CSS溢出属性 css有一个属性专门控制元素内容溢出处理:Overflow 值 描述 visible 默认值。内容不会被修剪,会呈现在元素框之外。

1.2K20

表格边框你知多少

结论     a)hidden > double > solid > dashed > dotted > none(默认值) 4、边框溢出与style属性有关 结论     a)上面两个角水平方向紧贴着...结论     a)水平方向上:当两个单元格只存在颜色不一致情况下,发生冲突单元格相对较左侧单元格样式     b)垂直方向上:当两个单元格只存在颜色不一致情况下,发生冲突单元格相对较顶部单元格样式...    b)当ridge 与 groove冲突并且表格 非 第一行发生冲突时,两个冲突单元格左上角和右上角以及冲突边上角都存在问题     c)从table2、table3、table4可以看出...、table5可以看出,当outset 与 inset冲突且表格第一行发生冲突时,两个冲突单元格左上角和右上角以及冲突边上角都存在问题     c)从table2、table4、table5可以看出...为hidden,则边框会,溢出垂直方向上不会发生溢出情况,溢出边框不会占用文本流空间 兼容性问题 表格各个浏览器下兼容性问题     1、水平方向上:当两个单元格只存在颜色不一致情况下,冲突边界渲染样式与

1.6K30

表格边框你知多少

结论 a)水平方向上:当两个单元格只存在颜色不一致情况下,发生冲突单元格相对较左侧单元格样式 b)垂直方向上:当两个单元格只存在颜色不一致情况下,发生冲突单元格相对较顶部单元格样式...) b)可以看出在FF下,四个角重合之处渲染优先级是,垂直方向上两个相邻单元格,相对偏下单元格冲突边进行渲染 理由 从“”这个单元格四个角可以看出,四个角除了会底边是有其他叫层叠而来...b)当ridge 与 groove冲突并且表格 非 第一行发生冲突时,两个冲突单元格左上角和右上角以及冲突边上角都存在问题 c)从table2、table3、table4可以看出...、table5可以看出,当outset 与 inset冲突且表格第一行发生冲突时,两个冲突单元格左上角和右上角以及冲突边上角都存在问题 c)从table2、table4、table5可以看出...为hidden,则边框会,溢出垂直方向上不会发生溢出情况,溢出边框不会占用文本流空间 表格各个浏览器下兼容性问题 1、水平方向上:当两个单元格只存在颜色不一致情况下,冲突边界渲染样式与direction

1.4K60

表格边框你知多少

边框溢出与style属性有关 结论     a)上面两个角水平方向紧贴着table边框边很重要,如若border-style为hidden,则边框会溢出     b)垂直方向上不会发生溢出情况    ...非 第一行发生冲突时,两个冲突单元格左上角和右上角以及冲突边上角都存在问题     c)从table2、table3、table4可以看出,当outset 与 inset冲突且表格 非 第一行发生冲突时...冲突且表格第一行发生冲突时,两个冲突单元格左上角和右上角以及冲突边上角都存在问题     c)从table2、table4、table5可以看出,当outset 与 inset冲突且表格第一行发生冲突时...冲突且表格第一行发生冲突时,两个冲突单元格左上角和右上角以及冲突边上角都存在问题     d)综合上部表现可以看出,当两个单元格发生冲突以后,处于表格最后一行时,冲突边上部(角)存在渲染问题...为hidden,则边框会,溢出垂直方向上不会发生溢出情况,溢出边框不会占用文本流空间 兼容性问题 表格各个浏览器下兼容性问题     1、水平方向上:当两个单元格只存在颜色不一致情况下,

3.6K50

【CSS3 理论知识】表格边框(table-border)你知多少???

结论     a)水平方向上:当两个单元格只存在颜色不一致情况下,发生冲突单元格相对较左侧单元格样式     b)垂直方向上:当两个单元格只存在颜色不一致情况下,发生冲突单元格相对较顶部单元格样式...)     b)可以看出在FF下,四个角重合之处渲染优先级是,垂直方向上两个相邻单元格,相对偏下单元格冲突边进行渲染 理由     从“”这个单元格四个角可以看出,四个角除了会底边是有其他叫层叠而来...    b)当ridge 与 groove冲突并且表格 非 第一行发生冲突时,两个冲突单元格左上角和右上角以及冲突边上角都存在问题     c)从table2、table3、table4可以看出...、table5可以看出,当outset 与 inset冲突且表格第一行发生冲突时,两个冲突单元格左上角和右上角以及冲突边上角都存在问题     c)从table2、table4、table5可以看出...为hidden,则边框会,溢出垂直方向上不会发生溢出情况,溢出边框不会占用文本流空间 兼容性问题 表格各个浏览器下兼容性问题     1、水平方向上:当两个单元格只存在颜色不一致情况下,冲突边界渲染样式与

2.4K60

CSS进阶11-表格table

行,列,行组,列组和单元格可以它们周围绘制边框(CSS 2.2有两个边框模型)。开发者可以单元格垂直水平对齐数据,并可以将一行或者一列所有单元格数据对齐。...任何剩余列等分剩余水平表空间(减去边框borders或单元格间距cell spacing)。 表格宽度是表格元素'width'属性值和所有列宽总和(加上单元格间距或边框)较大那个 。...后续行单元格不会影响列宽。任何具有溢出内容单元使用“overflow”属性来确定是否裁剪溢出内容。...如果指定了一个length,则会同时提供水平垂直间距。如果指定了两个,则第一个给出水平间距,第二个给出垂直间距。length不一定是负值。...当确定表是否溢出某个祖先时,会考虑溢出到margin任何border(参见'overflow')。 ?

6.5K20

表格行与列边框样式处理原理分析及实战应用

结论 a)hidden > double > solid > dashed > dotted > none(默认值) 4、边框溢出与style属性有关 demo 结论 a)上面两个角水平方向紧贴着...chrome与IE,FF四个角重合之处不会采用组合层叠方式进行渲染) b)可以看出在FF下,四个角重合之处渲染优先级是,垂直方向上两个相邻单元格,相对偏下单元格冲突边进行渲染 理由 从“”这个单元格四个角可以看出...outset > inset b)从table2、table4、table5可以看出,当outset 与 inset冲突且表格第一行发生冲突时,两个冲突单元格左上角和右上角以及冲突边上角都存在问题...,而不是单一选择某一种样式,而四条边框则非重合(单一选择某一条边进行渲染) 上面两个角水平方向紧贴着table边框边很重要,如若border-style为hidden,则边框会,溢出垂直方向上不会发生溢出情况...,溢出边框不会占用文本流空间 另外发现一些兼容性问题: 水平方向上:当两个单元格只存在颜色不一致情况下,冲突边界渲染样式与direction(tr上设置该属性chrome有效,在其他浏览器上设置无任何效果

5K10

Qt学习笔记 TableWidget使用说明和增删改操作实现

表格变为禁止编辑 默认情况下,表格字符是可以更改,比如双击一个单元格,就可以修改原来内容,如果想禁止用户这种操作,让这个表格对用户只读,可以这样:  tableWidget->setEditTriggers...表格表头显示与隐藏 对于水平垂直方法表头,可以用以下方式进行 隐藏/显示 设置: tableWidget->verticalHeader()->setVisible(false);...单元格里加入控件: QTableWidget不仅允许把文字加到单元格,还允许把控件也放到单元格。...horizontalScrollBar();  scrollBar->hide();*/  setHorizontalScrollBarPolicy(Qt::ScrollBarAlwaysOff);//去掉水平滚动条... setVerticalScrollMode(QAbstractItemView::ScrollPerItem);//垂直滚动条按项移动  setAutoScroll(false);//去掉自动滚动

6K90

dotnet OpenXML 利用合并表格单元格 PPT 文档插入不可见额外版权信息

本文告诉大家如何利用 Office 对于 OpenXML 支持特性, PPT 表格里面,通过合并单元格存放一些额外信息,这些信息对用户来说是不可见,但是进行拷贝表格时候,可以保存此信息内容...开始之前,期望大家已了解很多 OpenXML 知识,详细请看 Office 使用 OpenXML SDK 解析文档博客目录 PPT 表格里面,采用了 RowSpan 用来表示单元格跨行,对应在下一行单元格将会被标记...vMerge="1" 表示此单元格垂直合并。...例如我对第一行第一个单元格设置合并单元格,合并行,那么第二行第一列单元格将被标记 vMerge="1" 表示被合并,如下面表格 Office 读取 OpenXML 文档,将无视 vMerge...="1" 存在,也就是此属性只是给开发者看而已,无论是否存在都不会影响到单元格合并 但事实上,依然可以标记了 vMerge="1" 单元格上面添加内容,例如以下有删减 OpenXML 文档

94510

根据标准word模板生成word文档类库(开源)

该组件填充域类型: 1.段落填充域; 2.填充域作为段落存在; 3.表格单元格(仅含水平表头-插入任意多行数据、含水平垂直表头-仅能填充模板中固定单元格)。...该组件填充内容类型: 1.文本(可设置字体、字体颜色、字体大小、背景色) 2.图片(可设置图片宽高) 3.表格(可设置单元格宽度) 填充规则: 1.段落填充域填充文本和图片;...2.填充域作为段落时填充文本、图片和表格,还可以通过AddContentLine方法填充文本和图片后换行; 3.表格单元格填充文本、图片,还可以通过单元格CellInfo对象AddContentLine...7.若要将不含样式纯文本内容填充到表格单元格类型(仅含水平表头)填充域,则可调用WordMLHelperFillContentToTable(TagInfo tagInfo, DataTable...: TblType: TblType枚举类型,表示表格是仅含水平表头还是含水平垂直表头 Rows: 行集合 方法如下: AddRow: 填充行 RowStructureInfo: 表格单元格类型填充域表格行类

2.4K60

一篇文章带你了解CSS基础知识和基本用法

元素无法容纳文本会溢出 unrestricted 在任意两个字符间换行。 suppress 压缩元素换行。浏览器只在行没有其它有效换行点时进行换行。...2)).表格文本对齐 设置水平对齐方式,比如左对齐、右对齐或者居中 td { text-align:right } 设置垂直对齐方式,比如顶部对齐、底部对齐或居中对齐 td { vertical-align...如果定义一个length 参数,那么定义水平垂直间距 如果定义两个length 参数,那么第一个设置水平间距,而第二个设置垂直间距 4)).表格标题位置 caption { caption-side...:bottom } top 表格标题定位在表格之上 bottom 表格标题定位在表格之下 5)).显示表格单元格 table { empty-cells:hide } hide...不在空单元格周围绘制边框 show 单元格周围绘制边框 6)).设置表格布局算法 table { table-layout:fixed; } automatic 列宽度由单元格内容设定

11K20

HTML5 与CSS3 相关笔记

(5)表格特点:同行单元格高度一致且水平对齐,同列单元格宽度一致且垂直对齐。...有多行选项需滚动查看时,size属性设置提示看到行数,selected属性默认选中该列表项。...下划线、overline上划线、line-through`删除线 (2)vertical-align垂直对齐:只能作用于表格单元格对象: top顶、middle居中、bottom底 (...(1) visible默认溢出内容可见,显示盒子外面 (2)hidden 多出来内容被隐藏且没有滚动条 (3) scroll 有垂直水平2条滚动条,可查看多余内容 (4) auto 如果内容溢出,自动显示滚动条...4、:表格头部一个单元格表格表头,文本默认粗体且居中显示。 5、:表格一个单元格,一行包含几对这行中就有几个单元格。 6、表格个数,取决于一行数据单元格个数。

5.4K30
领券