问题：最近想把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. linux ssh反向代理

    参考:https://segmentfault.com/a/1190000002718360 内外运行:sshpass -p 123456 ssh -fNR 5000:localhost:22 ser ...

  2. BZOJ1270或洛谷1107 [BJWC2008]雷涛的小猫

    BZOJ原题链接 洛谷原题链接 \(DP\)水题. 定义\(f[i][j]\)表示小猫在高度\(i\),位于第\(j\)棵树时最多能吃到的柿子的数量.分为直接往下跳和跳到另一棵树两个决策. 那么很容易 ...

  3. 解决sqlserver还原数据库失败命令

    1.使用Master数据库 2.选择数据库 select * from master.sys.sysprocesses where dbid=db_id('database') 3.查出进程使用kil ...

  4. 《Java并发编程的艺术》Java并发机制的底层实现原理（二）

    Java并发机制的底层实现原理 1.volatile volatile相当于轻量级的synchronized,在并发编程中保证数据的可见性,使用 valotile 修饰的变量,其内存模型会增加一个 L ...

  5. C/C++生成静态库动态库及语言交互

    C++静态库与动态库(比较透彻) Go中调用C的动态库与静态库 我的示例 文件结构 |- sample |- c |- libsample |- libsample.h |- libsample.cp ...

  6. NPOI颜色对照表

    颜色对照表:颜色 测试 Class名称 short        Test颜色 Black 8 Test颜色 Brown 60 Test颜色 Olive_Green 59 Test颜色 Dark_Gr ...

  7. 从零开始学习java（一）java基础语法

    从公司裸辞一个月,原本工作是做VB的,现在想从事java:在找工作的时候总是要什么项目经验,多少有些不爽,所有语言都有共 通性,我就不信java有这么难?给自己点时间来学习.坚持一个月自学,看看自己的 ...

  8. 别人的Linux私房菜（17）进程管理与SELinux初探

    程序在磁盘中,通过用户的执行触发.触发事件时,加载到内存,系统将它定义成进程,给予进程PID,根据触发的用户和属性,给予PID合适的权限. PID和登陆者的UID/GID有关.父进程衍生出来的进程为子 ...

  9. ios  国际化开发

    一,.xib 1.首先选中xib文件,在右边的inspector中选择对应的国际化语言,如下图

  10. docker + mysql安装sonarqube

    docker sonarqube地址:https://hub.docker.com/_/sonarqube docker mysql地址:https://hub.docker.com/_/mysql ...