Css

Position Sticky 与表格头 原文章https://css-tricks.com/position-sticky-and-table-headers/. 本身产品有个需求需要表格自动吸顶，本身用了 antd design 的 scroll 实现的，现在使用 css 实现，效果更好 thead和tr上无法设置 styleposition: sticky;, 到那时在th上却可以，这也意味着，其实你可以在一个传统的table上实现吸顶 header 效果，如果你不清楚吸顶实现的原理，大概实现起来会很棘手吧，使用 css 总比原先用 js 去监听事件然后改变position好得多 兼容性 查看兼容性 只要不是 ie 这种活化石，基本都已经支持了 使用 保证 table 的 position 为 relative 给每个 th 加上 sticky 保证其父容器没有overflow: hidden 例子 .sticky-head >>>.el-table overflow visible .el-table__header-wrapper overflow visible position sticky top 0 z-index 10 table position sticky top 0 thead position relative th position sticky top 0 z-index 10

文字超过 x 行后补上省略号的几种办法 原文 简单来说，在 pc 端，文字过长溢出的话，溢出的部分会被替换成...,然而在显示情况中，更多的是在超过 x 行之后才启用这个特性，例如 <div class="module"> <p> Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. </p> </div> 最终希望三行之后到这种效果: 为了演示，我们先定义基础的 css，剩下的方法都在这个 css 的基础之上 .module { width: 250px; overflow: hidden; } Weird WebKit Flexbox Way 使用 webkit 内置的方案 ...

自动给表格空单元格补上字符串 背景 ui 设计中，如果单元格内部为空的话，需要填充一个默认字符串标明是个空格子，本身计划使用 js 来做的，但是考虑到要需要遍历，判断等等一系列操作，而且 js 里 0 做 boolean 判断也是返回 false，无形中增加了判断的步骤，所以这个时候还是求助于万能的 css 吧 以下为 less 代码 td:empty { &::after { content: "-"; } }

原文章https://css-tricks.com/position-sticky-and-table-headers/. 本身产品有个需求需要表格自动吸顶，本身用了 antd design 的 scroll 实现的，现在使用 css 实现，效果更好 thead和tr上无法设置 styleposition: sticky;, 到那时在th上却可以，这也意味着，其实你可以在一个传统的table上实现吸顶 header 效果，如果你不清楚吸顶实现的原理，大概实现起来会很棘手吧，使用 css 总比原先用 js 去监听事件然后改变position好得多 兼容性 查看兼容性 只要不是 ie 这种活化石，基本都已经支持了 使用 保证 table 的 position 为 relative 给每个 th 加上 sticky 例子 .stickyTable { :global(table) { position: relative; :global(th) { position: sticky; top: 0; z-index: 9999; } } }