问题：最近想把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的区别的更多相关文章

  1. 解决,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 ...

  2. Android表格布局(Table Layout)

    Android表格布局(Table Layout) 先来看布局管理器之间继承关系图: 图1 可知TableLayout继承了LinearLayout,所以表格布局本质上依然是线性管理器. 表格布局采用 ...

  3. 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 ...

  4. layui框架中关于table方法级渲染和自动化渲染之间的区别简单介绍

    方法级渲染: <table class="layui-hide" id="LAY_table_user" lay-filter="user&qu ...

  5. height:100%和height:auto的区别

    一直不明白height:100%和height:auto的区别,最近在制作前端页面时都用了height:100%;overflow:hidden; ,可是有些浏览器出现莫名的奇妙的问题,但换成heig ...

  6. CSS width：100%和width：auto的区别

    width:100%和width:auto的区别 width:auto比较聪明,如果margin已经左右占去10px的空间,那么width给的值就是580px. <style> div{ ...

  7. 宽度的100%和auto的区别

    前段时间做项目,发现分不清width设为100%和auto的区别,实在是太水了,就查了点资料,做个总结,有不对的地方欢迎大家指出. width:auto 块级元素默认的宽度值.看一下MDN上的解释:T ...

  8. 论decltype和auto的区别

    论decltype和auto的区别   decltype和auto的区别 ①对引用变量的不同之处:auto将引用变量赋给变量后,变量的类型为引用变量所对应的变量的类型.而decltype则是为引用类型 ...

  9. css height:100%和height:auto的区别

    css height:100%和height:auto的区别 height:auto,是指根据块内内容自动调节高度.height:100%,是指其相对父块高度而定义的高度,也就是按照离它最近且有定义高 ...

随机推荐

  1. Top值

    业务开发中经常会用到元素或者浏览器窗口的各种top值,最近开发组件的过程中也遇到各种问题,因此决定好好总结一下. 常见的top值 scrollTop Element.scrollTop 属性可以获取或 ...

  2. 使用tcpreply对DPDK进行压力测试（一台主机，2张网卡压测）

    使用tcpreply对DPDK进行压力测试 过往风萤 关注 2018.05.18 14:35* 字数 273 阅读 2评论 0喜欢 0 小公司没有testcenter之类的打流工具,并且内网流量比较小 ...

  3. P2880 [USACO07JAN]平衡的阵容Balanced Lineup（RMQ的倍增模板）

    题面:P2880 [USACO07JAN]平衡的阵容Balanced Lineup RMQ问题:给定一个长度为N的区间,M个询问,每次询问Li到Ri这段区间元素的最大值/最小值. RMQ的高级写法一般 ...

  4. 刷shipid 简便方法

    将表中的数据手动更改: select * from cmpps025 where  pino = ''; insert into cmpps025 select ncmp, pino, pono, i ...

  5. JS生成URL二维码

    需求:项目中需要在UI界面有一个二维码,扫码后可以跳转到二维码包含的URL. 解决方案:在前端用js生成一个包含URL等信息的二维码. 实现: 方案一. <!DOCTYPE HTML PUBLI ...

  6. Rabbit

    安装配置参考:https://blog.csdn.net/qq_31634461/article/details/79377256 概念学习参考(纯洁的微笑):https://www.cnblogs. ...

  7. mysql8 出现1521错误解决方法

    ALTER USER 'root'@'localhost' IDENTIFIED BY 'password' PASSWORD EXPIRE NEVER; #修改加密规则 ALTER USER 'ro ...

  8. Python从入门到精通之Seventh!

    函数浅析:可以减少代码重用,保持一致性,可扩展性,易维护性. 定义方法:def 函数名(形参):     '''功能注释'''      代码块 打印函数名时,会出现函数的内存地址.两个函数名相同时, ...

  9. 使用electron开发指静脉客户端遇到的问题总结

    使用electron 使用nodejs 的ffi模块调用dll文件 总结1.electron 与nodejs版本不需要一致,甚至nodejs版本应该高于electron的node版本2.要安装 Vis ...

  10. Springboot单例模式实战封装json转换

    一.定义 保证一个类仅有一个实例,并提供一个全局访问点. 二.优点 (1)在内存里只有一个实例,减少了内存开销      (2)可以避免对资源的多重占用      (3)设置全局访问点,严格控制访问 ...