Recently do workflow, the need for the mobile end to adapt to the original PC side of the table. Use pure CSS style to do so, then follow the small series together to see!

The table displayed on the PC is as follows:



If the mobile terminal wants to display the same table content, but using this format will affect the appearance, and it is not convenient to fill in, so the mobile terminal uses CSS style to display the table content in a single line, that is, the mobile terminal adaptive.

The style displayed on the mobile phone is as follows:



So how does CSS do this, which is the media query code @media.

The original CSS

<table border="" class="flowtable"> <style>table {margin:auto; } body {text-align:center; }</style> <tr> <th style="width: 60px;"> name </th> < TD > <input type="text"  loginUserInfo="name"   taskId="task1581839910513"   readonly="readonly"  />
									<input type="hidden"   name="userid"   processVariable="true">
								</td>
								<th style="width: 60px;"> Department </th> < TD > <input type="text" taskId="task1581839910513"  loginUserInfo="deptName"/>
								</td>
						
							</tr>
							<tr>
								<th style="width: 80px;"<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> Type of overtime </th> < TD colspan="3">
											<select name="overtype" taskId="task1581839910513"  required="true" processVariable="true" style="width: 97%" >
														<option value="1"> Daily overtime (19:00-21:00) < option > < option value ="2"> weekends (throughout) < option > < / select > < / td > < / tr > < tr > < th style ="width: 60px;"> Remarks </th> < TD colspan="3">
									<textarea  taskId="task1581839910513"  targetBox="td" name="manager" style="width: 90%; height: 100px;" ></textarea>
								</td>
						</tr>
					
								
						</table>
Copy the code

Now CSS – add style to the original HTML head and say:

<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>
Copy the code

If no effect can be added to the head

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

The core code is: (that is, when the screen is less than a certain value will automatically change the style as follows, also using the pseudo-element 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>
Copy the code

Bloggers are limited, interested partners can check the knowledge about media and fake elements oh! If you have any questions, please comment in the comments section!