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

LOGO OA教程 ERP教程 模切知識(shí)交流 PMS教程 CRM教程 開發(fā)文檔 其他文檔  
 
網(wǎng)站管理員

純css樣式使table表格自適應(yīng)手機(jī)和pc上WEB瀏覽器界面

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

最近做工作流,需要手機(jī)端自適應(yīng)原先pc端的表格。使用純css樣式即可做到,那么下邊跟隨小編一起來看看吧!

pc端上展示的table表格樣式如下:

 

如果手機(jī)端想顯示相同的table內(nèi)容但是用此格式的話會(huì)影響美觀,同時(shí)不方便填寫,因此手機(jī)端利用css樣式將table的內(nèi)容單行顯示,也就是手機(jī)端自適應(yīng)。
手機(jī)端顯示的樣式如下:

 

那么css是如何做到的呢,也就是后邊我要說的媒體查詢代碼@media.

原先的css:

<style>

table {margin:auto;}

body {text-align:center;}

</style>

<table border="" class="flowtable">

<caption>蓉江新區(qū)建投公司員工加班申請(qǐng)</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>

現(xiàn)在的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">

核心代碼是:
(也就是當(dāng)屏幕screen小于某個(gè)值的時(shí)候就會(huì)自動(dòng)改變樣式如下,同時(shí)利用了偽元素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>

感興趣的小伙伴可以再去查一下關(guān)于media和偽元素的知識(shí)喔!


該文章在 2023/8/25 0:01:36 編輯過
關(guān)鍵字查詢
相關(guān)文章
正在查詢...
點(diǎn)晴ERP是一款針對(duì)中小制造業(yè)的專業(yè)生產(chǎn)管理軟件系統(tǒng),系統(tǒng)成熟度和易用性得到了國(guó)內(nèi)大量中小企業(yè)的青睞。
點(diǎn)晴PMS碼頭管理系統(tǒng)主要針對(duì)港口碼頭集裝箱與散貨日常運(yùn)作、調(diào)度、堆場(chǎng)、車隊(duì)、財(cái)務(wù)費(fèi)用、相關(guān)報(bào)表等業(yè)務(wù)管理,結(jié)合碼頭的業(yè)務(wù)特點(diǎn),圍繞調(diào)度、堆場(chǎng)作業(yè)而開發(fā)的。集技術(shù)的先進(jìn)性、管理的有效性于一體,是物流碼頭及其他港口類企業(yè)的高效ERP管理信息系統(tǒng)。
點(diǎn)晴WMS倉(cāng)儲(chǔ)管理系統(tǒng)提供了貨物產(chǎn)品管理,銷售管理,采購(gòu)管理,倉(cāng)儲(chǔ)管理,倉(cāng)庫(kù)管理,保質(zhì)期管理,貨位管理,庫(kù)位管理,生產(chǎn)管理,WMS管理系統(tǒng),標(biāo)簽打印,條形碼,二維碼管理,批號(hào)管理軟件。
點(diǎn)晴免費(fèi)OA是一款軟件和通用服務(wù)都免費(fèi),不限功能、不限時(shí)間、不限用戶的免費(fèi)OA協(xié)同辦公管理系統(tǒng)。
Copyright 2010-2025 ClickSun All Rights Reserved