问题：最近想把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. Python MD5算法使用

    ## md5算法简介 1.  **简介**   MD5消息摘要算法(MD5 Message-Digest Algorithm),一种被广泛使用的密码散列函数,可以产生出一个128位(16字节)的散列值 ...

  2. FPGA學習筆記（貳）--- 流水燈

    平臺:FPGA黑金开发板 AX301 開發環境:Quartus Prime Version 17.0.0 Build 595 04/25/2017 Standard Edition 引脚配置:鼠標托拉 ...

  3. GUI学习之九——QLineEdit的学习总结

    我们在前面学习了各种按钮控件,从这一章开始就是各种输入控件的学习. 首先要用的就是QLineEdit——单行编辑器, 一描述 QLineEdit是一个单行文本编辑器,允许用户输入和编辑单行纯文本.自带 ...

  4. python 练习4

    题目为信用卡消费管理系统: 主程序:main.py #!usr/bin/env python # encoding: utf-8 import conf,sys,time,re,os import j ...

  5. 编写一个javscript函数 fn，该函数有一个参数 n（数字类型），其返回值是一个数组，该数组内是 n 个随机且不重复的整数，且整数取值范围是 [2, 32]。

    function fn(n){ if(n<2 || n>32) { return; }  if(!n) { return;}  //判断n是否为数字  if(!/^[0-9]+.?[0-9 ...

  6. 描点的改进：运用chart画图。

    主要是利用Chart画图: 通过选中一部分曲线进行图像的放大和缩小,最小值为1格. 先计算最大值和最小差值.然后赋值给AxisY.Minimum 和AxisY.Maximum.x轴初始显示数目:Axi ...

  7. python文件操作打开模式 r,w,a,r+,w+,a+ 区别辨析

    主要分成三大类: r 和 r+     "读"功能 r  只读 r+ 读写(先读后写) 辨析:对于r,只有读取功能,利用光标的移动,可以选择要读取的内容. 对于r+,同时具有读和写 ...

  8. ajax相关知识总结

    一.原生AJAX的兼容版本实现 function createXhr(){ var Xhr = null; //浏览器的判断 if(window.XMLHttpRequest){ //ie789 ch ...

  9. 用HTML做登录网页

    <html>  <head> 这里是文档的头部 ... ... ...<title>定义文档标题...</title> </head> &l ...

  10. redis_字典_哈希hash

    字典.哈希表基本数据结构 redis字典使用哈希表作为底层实现,基本结构就是数组+散列 typedef struct dictht { // 哈希表数组 dictEntry **table; // 哈 ...