相对自适应表格

相对自适应表格(relative responsive table)

需求分析

该样式的主要需求分析是这样子的:一个表格,有很多列内容,超出了屏幕的最大宽度,如果不做处理的情况下,浏览器会多出一个滚动条,所以我们需要改为没有滚动条,同时可以查看表格的内容。这个常常叫自适应。我之前也写过一篇文章详细的介绍了网络上大多数的自适应表格方法:响应式表格,HTML表格自适应(responsive table)

代码思路

首先左边的第一列是数据的名称,那么滚动的时候这一列最好不随着滚动条拉动而滚动,他会清晰的显示了右边是什么内容。

所以我们分成两部分:一部分是第一列的数据名称,另一部分是数据列表。

左边的数据采用固定宽度或者相对宽度,使用绝对定位浮动在一个地方。

右边则使用正常流,距离左边的宽度等于上面的,这样子右边的整体内容就是一个正常流,我们在里面再嵌套一个div,那么他就是100%的宽度,超出就会隐藏了。

实现代码

responsive table by qdkfweb.cn

代码优势

  1. 代码绿色纯天然,无污染,代码干净清晰,不需使用JS,极少量的CSS。布局无hack。
  2. 兼容所有浏览器,包括最古老的的IE6,兼容手机和平板。
  3. 最符合表格内容过多出现滚动的需求,互联网上最合适的表格自适应布局,你值得拥有。

下载使用

该项目已经上传到github上了。如果感兴趣可以fork或者下载使用:responsive table

欢迎你下载这个代码并把他应用到你的项目中去,如果你发现问题或者有更好的意见,欢迎给我留言或者联系我。

如果这个源码对你有用,请把他分享给你的小伙伴吧。

下载源码 赞助我

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注