问题：最近想把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. centos-0 基础

    netstat -nap #会列出所有正在使用的端口及关联的进程/应用kill -9 1777        #杀掉编号为1777的进程(请根据实际情况输入) http://www.cnblogs.c ...

  2. 自定义扩展实现相对于addRoutes的removeRoutes方法——vue-router

    使用vue-router的addRoutes方法做登录权限控制,当用户推出登录回到login页后,切换不同权限的账号,如果不reload页面,会导致router权限问题,故在vue-router代码中 ...

  3. Redhat 7 开通防火墙端口

    1.查看防火墙状态,root用户登录,执行命令systemctl status firewalld 2.开启防火墙:systemctl start firewalld 3.关闭防火墙:systemct ...

  4. STS中db.properties配置文件

    db.name=root db.password=root db.url=jdbc:mysql://localhost:3306/day13?useUnicode=true&character ...

  5. SringMVC概述

    Spring为展现层提供的基于MVC设计理念的优秀的WEB框架,是目前最主流的MVC框架之一. Spring3.0后全面超越Struts2.0,成为最优秀的MVC框架,SpringMVC通过一套注解, ...

  6. mysql 字段指定值靠前排序方法，多字段排序排序方法

    背景:SEO下选择某查询条件 查询展示信息为装修设计师以及设计师作品.设计师原型设计为:选择某风格 例如:简约,则列表出现拥有简约风格的设计师信息以及该设计师类型为简约的作品(3条靠前记录) 浏览原型 ...

  7. django中views中方法的request参数

    知其然亦要知其所以然 views每个方法的参数都是request,那么问题来了,request为何物? 首先,几乎每个方法都是取数据(无论是从数据库,还是从第三方接口),然后进行一定的处理,之后传给前 ...

  8. 致C#,致我这工作一年(下)

    上一篇被很多前辈吐槽排版啊!哈哈!排版是有点土...继续接上文! 依旧跌宕起伏的人生 上次说到我面试通过了,然后我记得那一天的我太高兴了,把这一消息发给我父母和我所有的好基友,然后第二天就入职了,我记 ...

  9. Redis的启动及配置

    在redis已经安装完成的情况下,进入redis/bin目录下,输入命令: ./redis-server,就可以直接启动redis了,效果如图所示: 但是此时终端无法进行任何操作,按CTRL+c命令, ...

  10. 2019.03.28 bzoj3326: [Scoi2013]数数（数位dp）

    传送门 题意: 一个人数数,规则如下: 确定数数的进制B 确定一个数数的区间[L, R] 对于[L, R] 间的每一个数,把该数视为一个字符串,列出该字符串的所有连续子串对应的B进制数的值. 对所有列 ...