CSS实现表格的自适应效果
推荐

CSS实现表格的自适应效果
该样式的主要需求分析是这样子的:一个表格,有很多列内容,超出了屏幕的最大宽度,如果不做处理的情况下,浏览器会多出一个滚动条,所以我们需要改为没有滚动条,同时可以查看表格的内容。这个常常叫自适应。

代码思路

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

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

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

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

实现代码
/*表格自适应样式*/
table{border-collapse:collapse; border-spacing:0; border:0;width:100%;}
table tr td, table tr th{border:1px solid #999; padding:.5em 1em; white-space:nowrap;}
.table-container table tr td, .table-container tr th{border:0; border-bottom:1px solid #999; border-right:1px solid #999; text-align:center;}
.table-container table{border:1px solid #999; border-left:0;}
/*超出部分出现滚动条*/
.table-container{width:100%; overflow-y:auto; _overflow:auto; margin:0 0 1em;}
/*IOS滚动条*/
.table-container::-webkit-scrollbar
{
-webkit-appearance: none;
width: 14px;
height: 14px;
}
.table-container::-webkit-scrollbar-thumb
{
border-radius: 8px;
border: 3px solid #fff;
background-color: rgba(0, 0, 0, .3);
}

代码优势

  1. 代码绿色纯天然,无污染,代码干净清晰,不需使用JS,极少量的CSS。布局无hack。
  2. 兼容所有浏览器,包括最古老的的IE6,兼容手机和平板。
  3. 最符合表格内容过多出现滚动的需求,互联网上最合适的表格自适应布局,你值得拥有。
  4. 将table表格放入一个类目为“table-container”的DIV里即可,就是这么简单,还不快试试?

版权属于:够过瘾——挨踢男的葵花宝典

文章标签:表格自适应

文章链接:http://www.gouguoyin.cn/html5/78.html

转载时必须以链接形式注明原始出处及本声明。

如果您觉得本文对您有所帮助,请小额赞助一下,我会优先回答您在使用过程中出现的问题,点此赞助

如有疑问或遇到技术问题,请加官方QQ群: 421537504   GoCMS官方交流群

文章点评:

表情

3条评论

  • 勾国磊 2年前
  • 够过瘾 2年前
    • 勾国磊 回复 够过瘾 #1 2年前