zoukankan      html  css  js  c++  java
  • 移动端竖着的表格问题(IOS)

    表格table必须要有table-layout:fixed属性,tr必须要有display:inline-block;属性,
    tbody中tr不换行显示:tbody:white-space:nowrap;tr:display:inline-block;tr没有float:left;属性。ios中出问题主要是在此基础上给td加display:block;属性。不要忘记:td,th都要加超出文本省略号,text-overflow:ellipsis;overflow:hidden;white-space:nowr
    

      

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">		
    		<title>1新建客户</title>
    		<link rel="stylesheet" type="text/css" href="../css/compent.css"/>
    		<!--<link rel="stylesheet" type="text/css" href="../css/compent2.css"/>-->
    		<link rel="stylesheet" type="text/css" href="客户.css"/>
    		<style>
    			._DIV_CONTENTSZ{overflow: auto;}
    			
    			._TABLE_DIV{100%;float:left;background-color: #FFF;}
    			._TABLE{100%;position:relative;table-layout: fixed;}
    			._TABLE thead{30%;float: left;}
    			._TABLE thead>tr{100%;float: left;}
    			._TABLE thead>tr>th{100%!important;float: left;height:45px;line-height: 44px;font-weight: normal;text-align: left;text-indent: 10px;border-bottom: 1px solid #EEE;font-size: 16px;color: rgb(51,51,51);}
    			._TABLE tbody{ 70%;float: left;overflow: auto;white-space: nowrap; }
    			._TABLE tbody>tr{100%; display: inline-block;}
    			._TABLE tbody>tr>td{;display:block;100%!important;float: left;height:45px;line-height: 44px;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;border-bottom: 1px solid #EEE;font-size: 15px;color:rgb(51,51,51);}
     
     
    		</style>
    	</head>
    	<body>
    		<div class="_MAIN">
    			<div class="_MAIN1">
    				<div class="_MAIN1_">
    					<div class="_REGISTER_HEAD">
    						<a href="javascript:void(0);">
    							<span><i></i>返回</span>
    						</a>
    						<a href="javascript:void(0);">
    							<span>新建客户</span>
    						</a>
    						<a href="javascript:void(0);">
    							<span><i></i>保存</span>
    						</a>
    					</div>
    					<div class="_DIV_CONTENTSZ">
    						<div class="_INPUT_DIV">
    							<div class="DESCRIBE"><p>描述描述描述</p><span class="_RIGHT"><i>�</i>添加</span></div>
    						</div>
    						<div class="_TABLE_DIV">
    							<table class="_TABLE">
    								<thead>
    									<tr>
    										<th>对公账户</th>
    										<th>开户行</th>
    										<th>创建人</th>
    										<th>创建时间</th>
    										<th>维护人</th>
    										<th>维护时间</th>
    									</tr>
    								</thead>
    								<tbody>
    									<tr>
    										<td>12345678900</td>
    										<td>建设银行</td>
    										<td>张三</td>
    										<td><>1234546</p></td>
    										<td>李四</td>
    										<td>2018-07-03 1124</td>
    									</tr>
    									<tr>
    										<td>12115454545</td>
    										<td>建设银行</td>
    										<td>张三</td>
    										<td>2018-07-02 11:24</td>
    										<td>李四</td>
    										<td>2018-07-03 11:24</td>
    									</tr>
    									<tr>
    										<td>12115454545</td>
    										<td></td>
    										<td></td>
    										<td>2018-07-02 11:24</td>
    										<td>李四</td>
    										<td>2018-07-03 11:24</td>
    									</tr>
    									<tr>
    										<td>12115454545</td>
    										<td>建设银行</td>
    										<td>张三</td>
    										<td>2018-07-02 11:24</td>
    										<td>李四</td>
    										<td>2018-07-03 11:24</td>
    									</tr>
    								</tbody>
    							</table>
    						</div>
    					</div>
    				</div>
    			</div>
    		</div>
    	</body>
    </html>
    

      

  • 相关阅读:
    Django配置MySQL数据库教程
    给大家发个Python和Django的福利吧,不要钱的那种~~~
    Django 设置admin后台表和App(应用)为中文名
    Django 配置JWT认证方式
    威联通(NAS)应用篇:自建OwnCloud网盘(百度网盘,拜拜~~~)
    请不要浪费你的生命,一文多发推广就用它(OpenWrite)
    Django ORM 查询表中某列字段值
    【Django 2.2文档系列】Model 外键中的on_delete参数用法
    嵌入式、C语言位操作的一些技巧汇总
    【RT-Thread笔记】IO设备模型及GPIO设备
  • 原文地址:https://www.cnblogs.com/chenwan1218/p/13061639.html
Copyright © 2011-2022 走看看