狠狠色丁香婷婷综合尤物/久久精品综合一区二区三区/中国有色金属学报/国产日韩欧美在线观看 - 国产一区二区三区四区五区tv

LOGO OA教程 ERP教程 模切知識交流 PMS教程 CRM教程 開發文檔 其他文檔  
 
網站管理員

純css樣式使table表格自適應手機和pc上WEB瀏覽器界面

admin
2023年8月24日 23:54 本文熱度 687

最近做工作流,需要手機端自適應原先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協同辦公管理系統。
Copyright 2010-2025 ClickSun All Rights Reserved