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>
    

      

  • 相关阅读:
    【Github】github图片显示不出
    【Linux】docker安装FastDFS
    【Github】问题解决:Failed to connect to github.com port 443: Operation timed out
    python生成1000w的mysql测试数据
    python 瀑布流
    django使用url路径组合搜索
    将规定的文件以及文件夹,压缩打包
    定期清理iis_log日志文件
    自己开发的python分页插件
    使用IO多路复用selectors模块写上传下载功能
  • 原文地址:https://www.cnblogs.com/chenwan1218/p/13061639.html
Copyright © 2011-2022 走看看