CSS表格布局实践

如何实现上图所示效果:左右两列的列宽由列内最宽单元格的宽度决定,进度条列占据剩余空间。(兼容到IE8就好了)

经分析需要处理一列的宽度,只有table布局才有列的概念,故采用display:table | table-row | table-cell来布局。

CSS属性table-layout定义了表格单元格、行和列的布局算法。默认值为auto,表格及其单元格的宽度由其内部的内容决定。而值为fixed时,表格的宽度取决于tabe元素的宽度值,列宽由对应col元素的宽度决定,或者由首行单元格的宽度决定,后续行内单元格不会影响列宽。使用fixed布局方法时,一旦表格的首行下载和解析完成,整个表格即可被渲染。相对于自动布局方法,这种方法可加速表格渲染,但可能会造成后续单元格的内容与列宽不适合。如果单元格的内容溢出,使用overflow属性来决定是否截断溢出内容。

一直强烈建议使用fixed布局方式,但从上文看,是无法实现我们所需效果。而auto布局,默认为各列平分表格的宽度。如果我们对左右两列设置一个看似合适的固定宽度(如10em),进度条列是可以占据表格的剩余空间,但无法实现列宽根据内容自适应改变(so sad)。

怎么办?怎么办?怎么办?

猜想:我们可否为单元格设置一个最小宽度,当单元格的内容超过最小宽度时自动撑开?

经分析和尝试,将左右两列的内容设置不换行white-space:nowrap,并将宽度设置为一个很小的值(如width:1px | 1%),即可实现我们期待的效果

再猜想:如果让需要占据剩余空间的列的宽度尽可能的大,大到100%,那么浏览器是否会为其他列按照其内容宽度来分配空间呢?经尝试,居然也可以达到我们期待的效果

哈哈哈……

但是 why? why? why?

[未完待续]

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏IMWeb前端团队

css中如何做到容器按比例缩放

本文作者:IMWeb 结一 原文出处:IMWeb社区 未经同意,禁止转载 在说容易按比例缩放前,我们先说下图片按比例缩放。 对于图片,默认只设置图片的...

2759
来自专栏IMWeb前端团队

为元素添加边框,你有多少种好办法?

背景 相信大家在做项目的过程中会经常遇到这样的一个需求,鼠标hover到某个元素的时候为这个元素添加边框,这个简单的需求仅需注意添加边框后不会对原有的位置造成...

2227
来自专栏前端说吧

CSS3-实现单选框radio的小动画

3013
来自专栏HTML5学堂

轮播图效果,不再局限于JS制作!

HTML5学堂(码匠):网页的轮播图一直都是个比较精美的制作,同时也是用户体验较佳的效果。在开发工程师进行制作的时候往往会选择使用JS来书写,由此不禁会问,难道...

6886
来自专栏web前端

制作H5响应式页面注意事项、微信二次分享

1、H5页面(APP端)      1.1     APP端页面用HTML5制作,头部需要加适配信息:   <meta http-equiv="Content-...

3359
来自专栏十月梦想

jquery基础选择器

这里的基础用法和css的选取方式一致,对于css选择器熟悉的朋友这里使用简直小意思,下面几篇博文我们来详谈jq的高级选择器!

832
来自专栏十月梦想

移动端适配之百分比适配

前面简单了了解了一下移动端,包括移动端的设备独立像素,物理像素,渲染像素以及像素比(DPR)等相关知识!接下来简单介绍一个比较简单的移动端适配方案!

1523
来自专栏强仔仔

当鼠标移动到div或者超链接只上时,显示相应的鼠标形状

在HTML中很多情况都会要求我们当鼠标移动上去的时候显示相应的形状出来,要么是手型或者箭头这种之类的。 下面我就以超链接为例子,给大家介绍一下怎么实现这一过程。...

2196
来自专栏marsggbo

这是对position讲解最通俗易懂的版本了。

position 为了制作更多复杂的布局,我们需要讨论下 position 属性。它有一大堆的值,名字还都特抽象,别提有多难记了。让我们先一个个的过一遍,不过你...

2616
来自专栏熊二哥

Html与CSS快速入门03-CSS基础应用

这部分是html细节知识的学习。 ? ? 边框、填充、对齐和浮动 这部分将主要介绍使用CSS控制整个Web页面的各个方面,通常来说,会使用margin(外部)...

2508

扫码关注云+社区

领取腾讯云代金券