解决手机端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;顺利解决了!

border表格有的自动换行,有的不能自动换行!的更多相关文章

  1. Latex 表格内文字过长自动换行

    法一: [plain] view plaincopy \begin{tabular}{m{5cm}} 法二: [plain] view plaincopy \begin{tabular}{p{0.9\ ...

  2. Excel自动换行、Export2Excel 自动换行

    1需求:导出excel后自动换行显示. 2插件:Export2Excel 3.测试 listToExcel() { import('@/vendor/Export2Excel').then(excel ...

  3. editplus设置自动换行方法 editplus自动换行设置步骤

    原文链接:https://www.jb51.net/softjc/165897.html 发布时间:2014-05-14 17:03:54   作者:佚名    我要评论 editplus自动换行设置 ...

  4. html表格内容自动换行

    有时候表格会因为内容多少忽大忽小的很烦人,在网上搜了下解决方案,效果不错哦,给大家分享下!首先介绍两个利器:table-layout:fixed //固定表格大小word-break:break-al ...

  5. css中设置table中的td内容自动换行

    word-break:break-all和word-wrap:break-word都是能使其容器如DIV的内容自动换行. 它们的区别就在于: 1,word-break:break-all 例如div宽 ...

  6. WebView加载HTML图片大小自适应与文章自动换行

    http://www.brighttj.com/ios/ios-webview-load-html-image-adaptive.html 在很多App中都会使用到webview,尤其是在加载新闻内容 ...

  7. 【iOS】WebView加载HTML图片大小自适应与文章自动换行

    在很多App中都会使用到webview,尤其是在加载新闻内容等文章形式的数据时.因为图文混编以及不同字体格式的显示,在iOS进行编辑 和显示都是一大问题(当然,iOS中也可以用CoreText进行绘制 ...

  8. 2017年11月27日 C#MDI窗体创建&记事本打印&记事本查找、自动换行

    MDI窗体第一个父窗体 把属性里的IsMdiContainer设置为true就可以了 父窗体连接子窗体 //创建一个新的类,用来连接别的窗体,并且别的窗体为唯一窗体 List<Form> ...

  9. HTML中表格元素TABLE,TR,TD及属性的语法

    table:表格元素及属性 <table width="80%" border="1" cellspacing="1" cellpad ...

随机推荐

  1. python实现基于CGI的Web应用

    python实现基于CGI的Web应用 本文用一个“网上书店”的web应用示例,简要介绍如何用Python实现基于CGI标准的Web应用,介绍python的cgi模块.cigtb模块对编写CGI脚本提 ...

  2. MacOSX 中如何动态隐藏Dock Icon

    XCode创建了一个GUI工程,程序分几种运行模式,一种是agent模式,还有一种是GUI界面.Agent模式是没有界面的GUI程序,通过LaunchAgents启动.创建出来的Info.plist默 ...

  3. 关闭Windows 2008下面应用程序出错后的提示

    写了一个服务器端程序,没有能处理所有的错误,总有一些错误会抛出到系统中去.于是写了一个进程守护者,一旦发现服务器端退出,可以在第一时间重新启动服务器,也算是一种折中的方案吧.理论上讲应该是可行的,但是 ...

  4. CF 322B Ciel and Flowers 贪心水题

    B. Ciel and Flowers time limit per test 1 second memory limit per test 256 megabytes input standard ...

  5. ubuntu下vsftpd配置

    网上的文章好难懂啊..只想要简单粗暴,弄好能用就行啊,复杂的以后研究不行吗...折腾好久,其实弄出来能用不就这么点内容吗... 本文在Ubuntu Server 14.04 amd64系统测试. 安装 ...

  6. C#中常用关键字的作用

    ***new关键字:1.在堆中开辟空间 2.在开辟的空间中创建对象 3.调用对象的构造函数***this关键字:1.代表当前类的对象 2.调用自己的构造函数 ***return:1.立即结束本次方法2 ...

  7. iOS开发-OC语言 (四)数组

    知识点 1.NSArray 2.NSMutableArray 1.数组的基本用法: 2.数组的遍历 3.数组排序 ===========   NSArray  不可变数组  ============= ...

  8. PHP多维数组元素操作类

    我的框架里面一个多维数组元素操作类,主要用于读取数组中配置数据,可以通过字符串节点的方式:a.b.c 来获取和设置元素,以及多维数组的覆盖,有需求的可以参考下吧! <?php /** * Cre ...

  9. sparksql中行转列

    进入sparksql beeline -u "jdbc:hive2://172.16.12.46:10015" -n spark -p spark -d org.apache.hi ...

  10. filter怎么在程序里写,不用再web.xml中配置