纯css样式使table表格自适应手机和pc上WEB浏览器界面

当前位置：点晴教程→知识管理交流 →『技术文档交流』

admin

2023年8月24日 23:54 本文热度 572

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

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

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

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

原先的css：

<style>
	table {margin:auto;}
	body {text-align:center;}
</style>
<table border="" class="flowtable">
	<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;
    
    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)

<style>
	/* <= 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和伪元素的知识喔！

该文章在 2023/8/25 0:01:36 编辑过

点晴ERP是一款针对中小制造业的专业生产管理软件系统,系统成熟度和易用性得到了国内大量中小企业的青睐。

点晴PMS码头管理系统主要针对港口码头集装箱与散货日常运作、调度、堆场、车队、财务费用、相关报表等业务管理，结合码头的业务特点，围绕调度、堆场作业而开发的。集技术的先进性、管理的有效性于一体，是物流码头及其他港口类企业的高效ERP管理信息系统。

点晴WMS仓储管理系统提供了货物产品管理,销售管理,采购管理,仓储管理,仓库管理,保质期管理,货位管理,库位管理,生产管理,WMS管理系统,标签打印,条形码,二维码管理,批号管理软件。

点晴免费OA是一款软件和通用服务都免费，不限功能、不限时间、不限用户的免费OA协同办公管理系统。