移动端竖着的表格问题(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{width:100%;float:left;background-color: #FFF;}
			._TABLE{width:100%;position:relative;table-layout: fixed;}
			._TABLE thead{width:30%;float: left;}
			._TABLE thead>tr{width:100%;float: left;}
			._TABLE thead>tr>th{width: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{width: 70%;float: left;overflow: auto;white-space: nowrap; }
			._TABLE tbody>tr{width:100%; display: inline-block;}
			._TABLE tbody>tr>td{;display:block;width: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>

  

posted @ 2020-06-07 18:39  吃饭睡觉打痘痘  阅读(158)  评论(0编辑  收藏  举报