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

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

pc端上展示的table表格样式如下：

如果手机端想显示相同的table内容但是用此格式的话会影响美观，同时不方便填写，因此手机端利用css样式将table的内容单行显示，也就是手机端自适应。
手机端显示的样式如下：

那么css是如何做到的呢，也就是后边我要说的媒体查询代码@media.

原先的css

<table border="" class="flowtable"><style>table {margin:auto;} body {text-align:center;}</style><caption>蓉江新区建投公司员工加班申请</caption><tr><th style="width: 60px;">姓名</th><td><input type="text"  loginUserInfo="name"   taskId="task1581839910513"   readonly="readonly"  /><input type="hidden"   name="userid"   processVariable="true"></td><th style="width: 60px;">部门</th><td><input type="text" taskId="task1581839910513"  loginUserInfo="deptName"/></td></tr><tr><th style="width: 80px;">加班日期</th><td colspan="3"><input processVariable="true" type="text" name="overtimedate" id="qjsq_start_time" readonly="readonly" taskId="task1581839910513" style="width: 150px;"required="true" onFocus="WdatePicker({dateFmt:'yyyy-MM-dd'})" /></td></tr><tr><th>加班类型</th><td colspan="3"><select name="overtype" taskId="task1581839910513"  required="true" processVariable="true" style="width: 97%" ><option value="1">日常加班（19:00-21:00）</option><option value="2">周末加班（全天）</option></select></td></tr><tr><th style="width: 60px;">备注</th><td colspan="3"><textarea  taskId="task1581839910513"  targetBox="td" name="manager" style="width: 90%;height: 100px;" ></textarea></td></tr></table>

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

<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;}/* <= 568px */@media screen and (max-width: 568px) {table {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;}}</style>

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

<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">

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

/* <= 568px */@media screen and (max-width: 568px) {table {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;}}</style>

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

纯css样式使table表格自适应手机和pc相关推荐

Vue中使用纯CSS样式设计Table横向竖向滚动自定义个别列固定
在Vue中CSS样式来设计Table横向竖向滚动自定义个别列表头固定前言一.表格数据二.样式设计 1.表格与外层DIV样式 2.固定表头的样式(重要) 总结前言大家一定使用过很多UI,UI都 ...
html怎么做响应式表格,纯CSS实现响应式表格
自从转岗至腾讯云后,项目中接触到大量的数据表格.多列数据表格在空间有限的手机屏幕下,难以完美呈现,需要做响应式处理.本文介绍一种使用纯CSS实现响应式表格的方法. 通常表格中的一行代表一条项目,每列代 ...
表格html适应手机端,纯CSS实现响应式表格适应移动端
由于手机屏幕空间有限,太大的表格很难友好显示,本文介绍一种使用纯CSS实现响应式表格的方法,可以比较完美的在手机端显示. 在屏幕空间充足的情况下,我们可以将表格的每列都完全显式在屏幕上,但在手机下,每 ...
html表格高度自动调整,table表格自适应高度的办法
这篇文章主要为大家详细介绍了table表格自适应高度的办法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,有需要的朋友可以收藏方便以后借鉴. 关于自适应高度,361源码在以前给大家介绍过ifram ...
[css] 怎么使图片宽度自适应呢？
[css] 怎么使图片宽度自适应呢? 百分比 vw padding:百分比个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论主目录与歌谣一起通关前端 ...
css 实现16:9比例自适应手机尺寸，可设置任意比例
css 实现16:9比例自适应手机尺寸,可设置任意比例 .wrap {position: relative;width: 100%;height: 0;/* 比例:就是设置paddig-bottom ...
html table 转置,jQuery+CSS实现的table表格行列转置功能示例
本文实例讲述了jQuery+CSS实现的table表格行列转置功能.分享给大家供大家参考,具体如下: 先来看看运行效果: 具体代码如下: www.ddpool.cn jQuery行列转置 table ...
Css实现刘海,纯CSS样式写刘海屏效果
1. 效果: 2. 代码: 刘海? :root { --bg--color: #ed4014; } body { background: var(--bg--color); } .top_bar_di ...
css怎么设置table表格的边框为单线边框？（代码详解）
table表格边框怎么设置为单线边框?本篇文章就给大家介绍一种css设置table表格的边框为单线边框的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助. 首先我们来看看给tabl ...

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

纯css样式使table表格自适应手机和pc相关推荐

最新文章

热门文章