border表格有的自动换行，有的不能自动换行！

解决手机端tab超过设置的宽度换行！

 

<table id="vip-tab">
<tr id="leibie">
<th class="mingzi"><span>名字</span></th>
<th class="xingbie"><span>性别</span></th>
<th class="shouji"><span>手机</span></th>
<th class="dizhi"><span>地址</span></th>
</tr>

<tr class="xiang">
<td class="mingzi"><span>王大锤</span></td>
<td class="xingbie"><span>男</span></td>
<td class="shouji"><span>13561765825</span></td>
<td class="dizhi"><span>大兴区亦庄地盛北街1大兴区亦庄地盛北街1</span></td>
</tr>

</table>

 

表格样式

#vip-tab {
width:100%;
border:none;
margin-top: 0.2rem;
}
#leibie {
height:0.58rem;
text-align: center;
background-color: #1E83E3;
color:#fff;
font-family: "PingFang SC Medium";
font-size:0.26rem;
}

.xiang{
height:0.58rem;
text-align: center;
color: #222;
border-bottom: 1px solid #e0e0e0;
font-family: "PingFang SC Medium";
font-size:0.2rem;
word-break: break-all;
}

.mingzi {
width:15%;
border-left:none;
}

.xingbie {
width:15%;
}
.shouji {
width:30%;
}
.dizhi {
width:40%;
border-right: none;
}

 

#leibie span,.xiang td span {
display:inline-block;
width:100%;
height:100%;
float:left;
padding:2px 0;
border-right:1px solid #e0e0e0;
}

#leibie .dizhi span {
border-right:0;
}

.xiang .dizhi span {
display:inline-block;
width:94%;
border-right:0;
padding-left:3%;
}

 

/*
* 会员查询表里面的tab结束
* */

 

 

比如名称长，上海长板凳红木家具厂231，这时候名称的宽度超出了自身宽度，往后排了，没有换行，这个时候，我们用个css样式：wold-break：break-all;顺利解决了！