table-layout:fixed 布局注意事项
table-layout:auto
是表格布局中的默认值,采用浏览器自动表格布局算法,但是缺点会很明显
- 给
td
指定的width
不一定生效,td
的width
会自动调整 text-overflow: ellipsis
也会失效,同样,img
会撑大td
举个例子:
<table>
<tr>
<td>31</td>
<td>32ssssssssssssss</td>
</tr>
<tr>
<td>31</td>
<td>
<img src="assets/tiger.png" alt="">
</td>
</tr>
</table>
table {
display : table;
width : 200px;
height : 200px;
border-collapse : collapse;
table-layout : auto;
}
td {
overflow : hidden;
width : 100px;
height : 100px;
border : 1px solid black;
text-overflow : ellipsis;
}
这样的结果就是这样的:
td
的 width
和 img
都没有溢出隐藏,反而撑大了td
,但是如果把 table-layout
改为 fixed
,效果如图:
td
的text-overflow : ellipsis
和overflow : hidden
都会起作用,但是这里也有几个地方要注意:
text-overflow : ellipsis
生效的前提是overflow
不为visible
,最好是类似hidden
的值- 需要指定
table
的width
- 如果
td
的宽度加起来超过table
的width
,即使给table
加上overflow:hidden
,td
也不会被隐藏。
table-layout:fixed 布局注意事项的更多相关文章
- Android表格布局(Table Layout)
Android表格布局(Table Layout) 先来看布局管理器之间继承关系图: 图1 可知TableLayout继承了LinearLayout,所以表格布局本质上依然是线性管理器. 表格布局采用 ...
- [转]基于display:table的CSS布局
当IE8发布时,它将支持很多新的CSS display属性值,包括与表格相关的属性值:table.table-row和table-cell,它也是最后一款支持这些属性值的主流浏览器.它标志着复杂CSS ...
- 【翻译】Sencha Touch2.4 The Layout System 布局
[翻译]The Layout System 布局 In Sencha Touch there are two basic building blocks: componentsand containe ...
- 与table有关的布局
当IE8发布时,它将支持很多新的CSS display属性值,包括与表格相关的属性值:table.table-row和table-cell,它也是最后一款支持这些属性值的主流浏览器.它标志着复杂CSS ...
- css Table布局:基于display:table的CSS布局
两种类型的表格布局 你有两种方式使用表格布局 -HTML Table(<table>标签)和CSS Table(display:table 等相关属性). HTML Table是指使用原生 ...
- 【转载】Web移动端Fixed布局的解决方案
特别声明:本文转载于EFE的<Web移动端Fixed布局的解决方案>.如需转载,烦请注明原文出处:http://efe.baidu.com/blog/mobile-fixed-layout ...
- 移动端网页fixed布局问题解决方案
问题说明 移动端web的footer常常设计为fixed布局,但是在页面键盘被拉起时fixed的布局会出现问题,自己试了下,在较低版本ios和部分安卓机上会有此问题.具体问题看图示: <body ...
- [前端]使用JQuery UI Layout Plug-in布局 - wolfy
引言 使用JQuery UI Layout Plug-in布局框架实现快速布局,用起来还是挺方便的,稍微研究了一下,就能上手,关于该布局框架的材料,网上也挺多的.在项目中也使用到了,不过那是前端的工作 ...
- 从 Auto Layout 的布局算法谈性能
这是使用 ASDK 性能调优系列的第二篇文章,前一篇文章中讲到了如何提升 iOS 应用的渲染性能,你可以点击 这里 了解这部分的内容. http://t.cn/Rc4KbUC 在上一篇文章中,我们提到 ...
随机推荐
- 用python将MSCOCO和Caltech行人检测数据集转化成VOC格式
代码:转换用的代码放在这里 之前用Tensorflow提供的object detection API可以很方便的进行fine-tuning实现所需的特定物体检测模型(看这里).那么现在的主要问题就是数 ...
- go和python互调
https://www.cnblogs.com/huangguifeng/p/8931837.html Python调用go编写的高性能模块 https://yq.aliyun.com/artic ...
- 添加额外的源, 使得yum可以安装更多的软件
RHEL 官方扩展源 yum localinstall http://dl.fedoraproject.org/pub/epel/7/x86_64/e/epel-release-7-5.noarch. ...
- 网站性能测试指标(QPS,TPS,吞吐量,响应时间)详解
转载:http://www.51testing.com/html/16/n-3723016.html 常用的网站性能测试指标有:吞吐量.并发数.响应时间.性能计数器等. 并发数 并发数是指系统同时 ...
- ios7注意事项随笔
1,修改状态栏的样式和隐藏. 首先,需要在Info.plist配置文件中,增加键:UIViewControllerBasedStatusBarAppearance,并设置为YES: 然后,在UIVie ...
- 第四章 TCP粘包/拆包问题的解决之道---4.2--- 未考虑TCP粘包导致功能异常案例
4.2 未考虑TCP粘包导致功能异常案例 如果代码没有考虑粘包/拆包问题,往往会出现解码错位或者错误,导致程序不能正常工作. 4.2.1 TimeServer 的改造 Class : TimeServ ...
- vue再次入手(数据传递①)
准备 之前使用vue.js完成一个项目之后,对其还是充满着无限兴趣,于是不妨利用碎片时间再次研究一下这个“令人着迷”的js框架. 1.新建一个基于vue的项目,具体方法不再赘述,请看这里:http:/ ...
- API权限控制与安全管理
摘自网上 一.API权限控制范围 1.首先验证web端请求参数: (1)web请求参数:渠道.ServiceName.版本.Airline.时间戳(yyyyMMddhhmmssSSS).reqXML ...
- ajax和promise的结合使用
在需要依赖完成的ajax请求可使用promise保证执行顺序 在第一个请求正确返回后再发送第二个请求 /* 定义一个使用promise的ajax请求,这里依赖jquery 参数中请求url为必填参数 ...
- Windows 7笔记本创建wifi热点供手机上网教程
Windows 7笔记本创建wifi热点供手机上网教程 | 浏览:60606 | 更新:2012-07-19 11:48 | 标签:笔记本 wifi 1 2 3 4 5 6 7 分步阅读 用智能手机的 ...