问题：最近想把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. MongoDB及Mongoose的记录

    MongoDB是一种NoSQL的文档型数据库,其存储的文档类型都是JSON对象. 在node.js中由于代码都是异步执行,且nosql也没有“事物”这一定义,所以日常使用中很难保证数据库操作的原子性. ...

  2. Swift.Operator-and-Items-in-Swift(1)

    Operator and Item 1. ..< a for-in loop and the half-open range operator (..<) // Check each pa ...

  3. Ansible安装及OS规划

    Ansible安装  1.以管理用户mtnsadmin连接服务器后下载安装包(-O表示将下载的文件存放到指定的文件夹下,同时重命名下载的文件)     sudo wget -O /etc/yum.re ...

  4. HTML-CSS背景渐进色

    一.分类 a>线性渐变:颜色沿着一条直线过度:从 左到右.从上到下等: b>径向渐变:圆形或椭圆形渐变,颜色不再沿着一条直线变化,而是从一个起点朝所有方向混合. 1.线性渐变语法: bac ...

  5. SpringCloud(一)Eureka注册中心

    Eureka简介 Eureka作为注册中心,管理各种服务功能包括服务的注册.发现.熔断.负载.降级等 Eureka注册中心实例 Eureka Server 1.pom文件配置SpringBoot.Sp ...

  6. Trachtenberg(特拉亨伯格)速算系统

    二战期间,俄国的数学家Jakow Trachtenberg(1888-1953)被关进纳粹集中营,在狱中,他开发出了一套心算算法,这套算法后来被命名为Trachtenberg(特拉亨伯格)速算系统. ...

  7. 从知乎首页用户操作入口学习到的CSS技巧 - 合理利用伪元素实现一些装饰样式

    最近在模仿做一个静态的PC版知乎,在模仿的过程中,从知乎工程师的方法中学到了不少知识,比如CSS方面的,以下介绍一个今天学到的伪元素的技巧. 示例 DOM结构为: <div class=&quo ...

  8. IE9及以下input无背景时，层级混乱问题

    IE9及以下版本:input输入框 background:none;时,层级比input的低的元素会显示在input之上,导致input点击不了. 解决方案: background:url(" ...

  9. unity中的Culling Mask

    摄像机按层渲染 Camera.cullingMask = 1<<x;//渲染x层 Camera.cullingMask = ~(1<<x);//渲染除去x的所有层 Camera ...

  10. 解决YUM下Loaded plugins: fastestmirror Determining fastest mirrors 的问题

    Centons下 其大概意思是fastestmirror不能使用,fastestmirror是yum的一个加速插件,具体我也没有仔细了解过,可能是系统不支持或者缺少组建导致的.处理办法就是禁用这个插件 ...