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>
    

      

  • 相关阅读:
    正则表达式的学习笔记
    apply()的使用
    for循环性能测试
    js基础复习~Array对象
    判断值是否为undefined
    layui 单选框取消选中
    layui 表单验证
    火狐浏览器下,表头边框无效
    css3 宽度百分比减去固定宽度 无效问题
    javaScript中的 call 和 apply
  • 原文地址:https://www.cnblogs.com/chenwan1218/p/13061639.html
Copyright © 2011-2022 走看看