解决手机端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. new和instanceof的内部机制

    new和instanceof的内部机制 首先我们来看看obj = new o()这条语句发生了什么: var obj = (function(){ var obj = {}; obj.__proto_ ...

  2. 识别Andriod APK签名证书类型

    转载请注明出处 根据已知Google证书的序列号来识别APK使用哪种证书签名的 目前只列出google原生签名,其他私有签名均视为presigned #!/bin/bash # Grab cert. ...

  3. 初识B/S结构编程技术

    B/S结构编程语言 ASP(Active Server Page 动态服务器页面)技术 微软早期推出的B/S编程技术,出现在JSP和ASP.NET之前,PHP当时也很不稳定.ASP之前,动态网站使用G ...

  4. 使用ThreadGroup模拟线程池

    参考文章: [1]创建线程池 http://sunnylocus.iteye.com/blog/223327?page=2#comments [2]线程组ThreadGroup  http://hub ...

  5. MySQL SET TRANSACTION 设置事务隔离级别

    1. 首先说一下autocommit 默认情况下autocommit的开关是打开的,也就是ON,查看方法 方法1. select @@[global/session].autocommit; 方法2. ...

  6. json文件报expected name at 1 1错误

    在eclipse编辑json文件时出现expected name at 1 1错误,解决方式如下: 方法一:json文件是不支持注释的,把所有/* content */删除即可 如果不想删除注释-- ...

  7. 使用KindEditor富文本编辑器,点击批量上传按钮没有选择图片按钮

    问题:批量上传没有选择图片按钮

  8. qtCreator 快捷键

    编号 快捷键 功能 1 Esc 切换到代码编辑状态 2 F1 查看帮助(选中某一类或函数,按下F1,出现帮助文档) 3 F2 在光标选中对象的声明和定义之间切换(和Ctrl+鼠标左键一样的效果,选中某 ...

  9. cocoaPods第三方库使用详解

    终端上安装了cocoapods后,打开终端输入下面命令: cd /Users/Sivek_lin/Desktop/AFNTest/AFNTest touch podfile pod search af ...

  10. Runloop与autoreleasePool联系

    autoreleasePool自动释放池,ARC模式下,苹果会自动进行内存管理,不需要我们手动去管理内存.这对于苹果开发者来说,省去了很多事情,不用再每天为了内存管理浪费掉宝贵的开发时间.大家都知道, ...