纯css样式使table表格自适应手机和pc

2024-06-18 02:45| 来源: 网络整理| 查看: 265

最近做工作流，需要手机端自适应原先pc端的表格。使用纯css样式即可做到，那么下边跟随小编一起来看看吧！

pc端上展示的table表格样式如下：在这里插入图片描述如果手机端想显示相同的table内容但是用此格式的话会影响美观，同时不方便填写，因此手机端利用css样式将table的内容单行显示，也就是手机端自适应。手机端显示的样式如下：那么css是如何做到的呢，也就是后边我要说的媒体查询代码@media.

原先的css

table {margin:auto;} body {text-align:center;} 蓉江新区建投公司员工加班申请姓名部门加班日期加班类型日常加班（19:00-21:00）周末加班（全天）备注

现在的css-在原来的html的head里加入style里边写入：

table { border: 1px solid #ccc; width: 100%; margin: 0; padding: 0; border-collapse: collapse; border-spacing: 0; } table tr { border: 1px solid #ddd; padding: 5px; } table td { padding: 10px; text-align: center; } table th { text-transform: uppercase; font-size: 14px; letter-spacing: 1px; } /* border: 0; } table thead { display: none; } table tr { margin-bottom: 10px; display: block; border-bottom: 2px solid #ddd; } table td { display: block; text-align: right; font-size: 13px; border-bottom: 1px dotted #ccc; } table td:last-child { border-bottom: 0; } table td:before { content: attr(data-label); float: left; text-transform: uppercase; font-weight: bold; } }

如果没有效果可以在head中添加上

核心代码是： (也就是当屏幕screen小于某个值的时候就会自动改变样式如下，同时利用了伪元素before)

/* border: 0; } table thead { display: none; } table tr { margin-bottom: 10px; display: block; border-bottom: 2px solid #ddd; } table td { display: block; text-align: right; font-size: 13px; border-bottom: 1px dotted #ccc; } table td:last-child { border-bottom: 0; } table td:before { content: attr(data-label); float: left; text-transform: uppercase; font-weight: bold; } }

博主能力有限，感兴趣的小伙伴可以再去查一下关于media和伪元素的知识喔！如果有问题，请在评论区批评指正！

【本文地址】

公司简介

联系我们