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;顺利解决了!
border表格有的自动换行,有的不能自动换行!的更多相关文章
- Latex 表格内文字过长自动换行
法一: [plain] view plaincopy \begin{tabular}{m{5cm}} 法二: [plain] view plaincopy \begin{tabular}{p{0.9\ ...
- Excel自动换行、Export2Excel 自动换行
1需求:导出excel后自动换行显示. 2插件:Export2Excel 3.测试 listToExcel() { import('@/vendor/Export2Excel').then(excel ...
- editplus设置自动换行方法 editplus自动换行设置步骤
原文链接:https://www.jb51.net/softjc/165897.html 发布时间:2014-05-14 17:03:54 作者:佚名 我要评论 editplus自动换行设置 ...
- html表格内容自动换行
有时候表格会因为内容多少忽大忽小的很烦人,在网上搜了下解决方案,效果不错哦,给大家分享下!首先介绍两个利器:table-layout:fixed //固定表格大小word-break:break-al ...
- css中设置table中的td内容自动换行
word-break:break-all和word-wrap:break-word都是能使其容器如DIV的内容自动换行. 它们的区别就在于: 1,word-break:break-all 例如div宽 ...
- WebView加载HTML图片大小自适应与文章自动换行
http://www.brighttj.com/ios/ios-webview-load-html-image-adaptive.html 在很多App中都会使用到webview,尤其是在加载新闻内容 ...
- 【iOS】WebView加载HTML图片大小自适应与文章自动换行
在很多App中都会使用到webview,尤其是在加载新闻内容等文章形式的数据时.因为图文混编以及不同字体格式的显示,在iOS进行编辑 和显示都是一大问题(当然,iOS中也可以用CoreText进行绘制 ...
- 2017年11月27日 C#MDI窗体创建&记事本打印&记事本查找、自动换行
MDI窗体第一个父窗体 把属性里的IsMdiContainer设置为true就可以了 父窗体连接子窗体 //创建一个新的类,用来连接别的窗体,并且别的窗体为唯一窗体 List<Form> ...
- HTML中表格元素TABLE,TR,TD及属性的语法
table:表格元素及属性 <table width="80%" border="1" cellspacing="1" cellpad ...
随机推荐
- 一个方便且通用的导出数据到 Excel 的类库
一个方便且通用的导出数据到 Excel 的类库 起源: 之前在做一个项目时,客户提出了许多的导出数据的需求: 导出用户信息 导出业务实体信息 各种查询都要能导出 导出的数据要和界面上看到的一致 可以分 ...
- [置顶] Objective-C编程之道iOS设计模式单例解析(2)
上一篇文章,提到了单例子类化的问题.正好最近,我在Stack Overflow看见一位国外高人,也谈及了单例子类化的一些内容.思考之后,总结了一些内容.其大意是利用NSDirectory存储不同子类的 ...
- aix上使用裸设备安装oracle10g数据库
一.检查系统信息 [root@aix222 /]# oslevel -r 5300-08 [root@aix222 /]# prtconf | grep -i mem Memory Size: 190 ...
- Python爬虫小白入门(六)爬取披头士乐队历年专辑封面-网易云音乐
一.前言 前文说过我的设计师小伙伴的设计需求,他想做一个披头士乐队历年专辑的瀑布图. 通过搜索,发现网易云音乐上有比较全的历年专辑信息加配图,图片质量还可以,虽然有大有小. 我的例子怎么都是爬取图片? ...
- js jquery 实现html页面之间参数传递(单一参数、对象参数传递)
最近自己在忙着做毕业设计,后台程序员,前端菜鸡,因为需要,所以实现了html页面之间参数传递.------jstarseven .菜鸡的自我修养. 页面A代码如下: <!DOCTYPE html ...
- javascript:;”是什么意思
就是 执行一段 空白JAVASCRIPT语句 并且返回的也是空或者false值..把 javascript:; 加在超级链接上 就可以防止 链接跳转..从而 可以给 链接的 onclick 方法上 写 ...
- 安装vsftp流程整理
昨天装个FTP,发现之前写的一篇操作日志太简陋了,重新整理了下记在这儿 # 安装 VSFTP yum -y install vsftpd # 创建FTP日志文件路径 touch /var/log/vs ...
- To the end
身为一名初二狗的我也走过了半年.不管怎么说人生中也没有几个半年嘛.从九月到现在快四个月了,我也离中考越来越近了/郁闷/.但是还是要好好过唔.不过我想起这半学期还是挺充实的,至少没有浪费太多的时间.有些 ...
- Tensorflow (1)
'tf.placeholder' or 'tf.Variable' The difference is that with tf.Variable you have to provide an ini ...
- ECMAScript6之String类型的扩展
String类型的扩展 模板字符串 模板字符串是字符串的增强版,既可以当做普通的字符串使用,也可以在字符串中嵌入变量,它用反引号`来表示. //普通字符串 `In javascript '\n' is ...