<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>移动端表格问题</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<script type="text/javascript" src="static/js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="static/js/viewPort.js"></script>
<link rel="stylesheet" type="text/css" href="static/css/base.css">
<style type="text/css">
.payment-limit{
background:#f5f5f5;
padding:0.4rem 0.5rem;
}
.payment-limit-list{
background:#fff;
}
.payment-limit-list .tit{
text-align:center;
font-size:0.9rem;
color:#333;
padding:0.7rem 0 0.5rem 0;
}
.payment-limit-list table{
width:100%;
text-align:center;
font-size:0.7rem;
}
.payment-limit-list table tr:first-child{
}
.payment-limit-list table tr th{
background:#8db5e3;
height:1.7rem;
text-align:center;
border-right:1px solid #8db5e3;
color:#fff;
}
.payment-limit-list table td{
height:1.95rem;
color:#333;
}
.payment-limit-list table tr td:first-child{
color:#999;
}
.payment-tags{
line-height:0.75rem;
color:#999;
font-size:0.6rem;
}
.gWidth{
width:640px;
}
</style>
</head>
<body>
<div class="gWidth">
<div class="payment-limit">
<div class="payment-limit-list">
<div class="tit">快捷支付充值限额</div>
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<colgroup>
<col width="32%">
<col width="34%">
<col width="32%">
</colgroup>
<tr>
<th>银行</th>
<th>单笔限额</td>
<th>每日限额</th>
</tr>
<tr>
<td>工商银行</td>
<td>50000元</td>
<td>50000元</td>
</tr>
<tr>
<td>光大银行</td>
<td>50000元</td>
<td>100000元</td>
</tr>
<tr>
<td>建设银行</td>
<td>50000元</td>
<td>200000元</td>
</tr>
<tr>
<td>农业银行</td>
<td>50000元</td>
<td>50000元</td>
</tr>
<tr>
<td>中国银行</td>
<td>50000元</td>
<td>50000元</td>
</tr>
<tr>
<td>浦发银行</td>
<td>50000元</td>
<td>200000元</td>
</tr>
<tr>
<td>交通银行</td>
<td>50000元</td>
<td>200000元</td>
</tr>
<tr>
<td>民生银行</td>
<td>50000元</td>
<td>50000元</td>
</tr>
<tr>
<td>平安银行</td>
<td>50000元</td>
<td>100000元</td>
</tr>
<tr>
<td>广发银行</td>
<td>50000元</td>
<td>200000元</td>
</tr>
<tr>
<td>中信银行</td>
<td>50000元</td>
<td>50000元</td>
</tr>
</table>
</div>
<div class="payment-tags">如果您的充值金额超过银行限额，可使用电脑登录合众金服官网进行网银充值。</div>
</div>
<p>总结：table用在移动端,在安卓[小米note]手机上,默认的边框去不掉。更确切得说,应该是td之间有间隙(右边、下边),table默认背景颜色为白色</p>
<ul class="notice">
<li>简单粗暴：不用表格</li>
<li>当表格需要背景颜色时,直接给table添加背景颜色,而不是给td。注：给td加背景色后,由于有td之间有间隙,那么,table默认的白色背景就会显现出来</li>
<li>类似隔行换色这种设计,做法就是给每个tr添加颜色,然后再去给td相同颜色的边框。</li>
</ul>
</div>
</body>
</html>
518
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
