纯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和伪元素的知识喔！如果有问题，请在评论区批评指正！