table-layout引起的探索——fixed和auto的区别
问题:最近想把mui提供的底部导航组件样式单独抽出来,遇到一个问题:给底部图片下的文字设置了超出隐藏,但没有生效,如下图:
注:该底部导航为mui提供的组件
解决:这让我百思不得其解,经过一些琢磨后发现是这个属性的原因:table-layout
table-layout 属性的作用是设置表格布局算法,详情:https://www.runoob.com/cssref/pr-tab-table-layout.html
只要把这个属性去掉或者改成 table-layout:auto,超出隐藏就无法生效,必须设置成 table-layout:fixed;
那么,问题来了,table-layout的 auto 和 fixed属性有什么区别呢?
auto为自动布局;fiexd为固定布局
DEMO
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8" />
<style type="text/css">
table.one {
table-layout: auto;
} table.two {
table-layout: fixed;
}
</style>
</head> <body> <table class="one" border="1" width="100%">
<tr>
<td width="20%">1000000000000000000000000000000000000000000000000000</td>
<td width="40%">10000000</td>
<td width="40%">100</td>
</tr>
</table> <br /> <table class="two" border="1" width="100%">
<tr>
<td width="20%">10000000000000000000000000002222222222222222</td>
<td width="40%">10000000</td>
<td width="40%">100</td>
</tr>
</table> </body> </html>
上面测试代码结论:
①:设置了 table-layout: auto;属性的table里的td,虽然第一个td宽度是20%,但如果内容超出20%,会自动根据内容调整宽度,即自适应
②:设置了 table-layout:fixed;属性的table里的td,第一个td宽度是20%,内容超出以后不会自动调整宽度,并且会和第二个td重合
table-layout引起的探索——fixed和auto的区别的更多相关文章
- 解决,Incorrect table definition; there can be only one auto column and it must be defined as a key
今天在迁移项目时,操作数据库报错: Incorrect table definition; there can be only one auto column and it must be defin ...
- Android表格布局(Table Layout)
Android表格布局(Table Layout) 先来看布局管理器之间继承关系图: 图1 可知TableLayout继承了LinearLayout,所以表格布局本质上依然是线性管理器. 表格布局采用 ...
- mysql:[Err] 1075 - Incorrect table definition; there can be only one auto column and it must be defined as a key
删除主键时,出错:[Err] 1075 - Incorrect table definition; there can be only one auto column and it must be d ...
- layui框架中关于table方法级渲染和自动化渲染之间的区别简单介绍
方法级渲染: <table class="layui-hide" id="LAY_table_user" lay-filter="user&qu ...
- height:100%和height:auto的区别
一直不明白height:100%和height:auto的区别,最近在制作前端页面时都用了height:100%;overflow:hidden; ,可是有些浏览器出现莫名的奇妙的问题,但换成heig ...
- CSS width:100%和width:auto的区别
width:100%和width:auto的区别 width:auto比较聪明,如果margin已经左右占去10px的空间,那么width给的值就是580px. <style> div{ ...
- 宽度的100%和auto的区别
前段时间做项目,发现分不清width设为100%和auto的区别,实在是太水了,就查了点资料,做个总结,有不对的地方欢迎大家指出. width:auto 块级元素默认的宽度值.看一下MDN上的解释:T ...
- 论decltype和auto的区别
论decltype和auto的区别 decltype和auto的区别 ①对引用变量的不同之处:auto将引用变量赋给变量后,变量的类型为引用变量所对应的变量的类型.而decltype则是为引用类型 ...
- css height:100%和height:auto的区别
css height:100%和height:auto的区别 height:auto,是指根据块内内容自动调节高度.height:100%,是指其相对父块高度而定义的高度,也就是按照离它最近且有定义高 ...
随机推荐
- LCA的两种写法
第一种是离线的Tarjan算法 #include<cstdio> using namespace std; int rd(){ ,fl=;char ch=getchar(); ;}ch=g ...
- 记一次Struts2 内核问题分析解决
问题场景描述 生产环境某个处理耗时比较长的接口,吞吐能力极差.客服反馈此功能长期处于毫无响应状态. 具体表现 系统启动后第一次调用耗时极慢,长时间不响应.紧随之后发起的请求也同时没有响应. 等待第一次 ...
- 4-3 重构发送post请求
当创建好一个post请求后 怎么测试呢?
- 认识JavaScript Promise
参考: EC前端 - Promise - http://www.ecmaer.com/javascript/nativeObj/promise.html 关于Promise: 什么是 Promise? ...
- Quartz的自定义插件
quartz本身插件: LoggingJobHistoryPlugin,LoggingTriggerHistoryPlugin分别可以打印scheduler容器管理的所有triggers和jobDet ...
- Netty使用(一)
什么是Netty Netty由JBOSS提供的基于Java NIO的开源框架,Netty提供异步非阻塞.事件驱动.高性能.高可靠.高可定制性的网络应用程序和工具, 可用于开发服务端和客户端. 配置服务 ...
- tp3
入口文件:index.php目录结构:核心,Thinkphp 公共资源,public jq 上传的图片等 应用目录,application 房模块 common:基于模块的公共目录,公共函数命名:类: ...
- 对int数组排序
// 排序-->小到大1 public void sortArray(int[] targetArr) { long t = System.currentTimeMi ...
- docker服务各个模块
docker容器官网:https://hub.docker.com/ 一.centos7.4中指定安装docker版本 1)默认yum源安装的docker版本为docker1.3.性能偏低,不支持k8 ...
- tensorflow学习之(十一)RNN+LSTM神经网络的构造
#RNN 循环神经网络 import tensorflow as tf from tensorflow.examples.tutorials.mnist import input_data tf.se ...