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

ZHAO_ 发布于2019-08-29 16:24 / 3413人阅读

摘要：对我来说其效果十分的怪异，具体见如下演示查看演示效果属性值应用之后，查看演示效果，可以得出如下结论给单元格指定的宽度值生效属性生效属性生效查看演示效果用例及分析我们以一个用户信息表格为例子进行演示。

引言

对我来说，table 有一个非常有用，支持性也很好的 CSS 属性，但它却很少为人所知。它改变了表格的渲染方式，并生成一个更加稳定可靠的布局。

它就是：

table {
  table-layout: fixed;
}

table-layout的缺省值是 auto，这个属性值及其效果大家十分熟悉。对我来说其效果十分的怪异，具体见如下演示：

查看演示效果

fixed属性值

应用 table-layout： fixed之后，查看演示效果，可以得出如下结论：

给单元格指定的宽度值生效

overflow 属性生效

text-overlfow 属性生效

查看演示效果

用例及分析

我们以一个用户信息表格为例子进行演示。该表格的列宽是固定的，不根据内容的多少而变化；表格内容不折行显示，超出行宽部分加省略号部分显示。

查看演示效果

上述表格的显示效果已经很好了，也比较接近实际项目的需要。

固定列宽的表格算法效果更容易预见，便于使用，同时渲染速度明显更快。因为表格的内容并不会影响单元格的宽度，所以在页面加载过程中，表格不需要频繁重绘。相信我们都对页面加载过程中表格不断重新调整列宽的恐怖情景记忆犹新。对于固定列宽的表格来说，这种情况就不会发生了。

本文主要汇编自 Chris Coyier 的一篇博客。但是因为本人水平有限，文中难免存在描述不清，代码不完善等问题，还请大家多多予以批评指正！

参考文献

Fixed Table Layouts

MDN table-layout

CSS-trick table-layout

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/113725.html

css的结构与布局

摘要：实际上表示视口宽度的，而不是。同样，表示视口高度的当视口宽度小于高度时，等于，否则等于。基于的方法这种应该算是最佳的解决办法实现方法当使用布局时，使用在水平和垂直方向都会居中。 1.自适应内部元素在css中，不给元素一个height值时，元素会自适应其内部的元素高度，有时我们想让元素的宽度也达到此效果，应用场景如下。如下当前的这种布局，想要改成最外层的div的宽度由当前的图片撑开的...

GeekQiaQia 2019-08-29 12:25 评论0 收藏0
[CSS]《CSS揭秘》第七章——结构与布局

摘要：精确控制表格列宽请注意，为了确保这个技巧奏效，需要为这些表格元素指定一个宽度哪怕是。同样，为了让发挥作用，我们还需要为那一列指定宽度。自适应内部元素 figure{ max-width: 300px; max-width: min-content;//这个关键字将解析为这个容器内部最大的不可断行元素的宽度（即最宽的单词、图片或具有固定宽度的盒元素。 mar...

Andrman 2019-08-30 15:54 评论0 收藏0
实现datatable表格第一列在手机端固定

摘要：自用笔记，如有错误请指正。这点很关键，一开始我作出的效果整个都是不对齐的。这个选项空着列宽的时候，手机端好像并不适用，需要注意一下，所以才出现了中控制文字不换行这个操作，这一步也是官方文档推荐的参考链接官方文档自用笔记，如有错误请指正。

Blackjun 2019-08-23 16:42 评论0 收藏0
支持多框架的组件库KPC 1.0正式发布

摘要：自从年月份对外公布以来，已经经过了个月的迭代，期间发布了几十个正式版本，但一直没有到，因为我们觉得是个里程碑版本，我们必须做的足够完善才敢称之为。自从17年11月份对外公布以来，KPC已经经过了8个月的迭代，期间发布了几十个正式版本，但一直没有到1.0，因为我们觉得1.0是个里程碑版本，我们必须做的足够完善才敢称之为1.0。而如今我们有信心对外宣布：KPC 1.0终于来了！其实距离...

刘厚水 2019-08-26 10:10 评论0 收藏0