问题:最近想把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重合
本文来自博客园:https://www.cnblogs.com/tu-0718/p/9926325.html
作者:你不知道的巨蟹
table-layout属性fixed和auto的区别
<!DOCTYPE html> <html lang="zh-cmn-Hans"> <head> <meta charset="utf-8" /> <title>table-layout属性fixed和auto的区别</title> <meta name="author" content="" /> <style> h1{font-size:16px;font-family:Arial;} .auto{table-layout:auto;width:350px;} .fixed{table-layout:auto;width:350px;} .fixed td{width:300px;} .auto td{width:200px;} </style> </head> <body> <h1>auto: 表格自动算法</h1> <table border="1" class="auto"> <tbody> <tr> <td>表格自动算法,宽度将基于单元格的内容自动拉伸</td> <td>表格自动算法</td> <td>表格自动算法</td> </tr> <tr> <td>表格自动算法</td> <td>表格自动算法</td> <td>表格自动算法</td> </tr> </tbody> </table>
<h1>fixed: 表格固定算法</h1> <table border="1" class="fixed"> <tbody> <tr> <td>表格固定算法布局</td> <td>表格固定算法</td> <td>表格固定算法</td> </tr> <tr> <td>表格固定算法</td> <td>表格固定算法</td> <td>表格固定算法</td> </tr> </tbody> </table> </body> </html>
结果:
从结果上看,
相同点:
如果表格都没有设定宽高属性,那么不管是auto或者fixed属性、表格宽度高度则为单元格宽高(包括一些padding、border属性等)累积的总和。
不同点:
auto属性:
当设置为auto属性,也就是table-layout属性的时候,如果表格设置了width属性height属性,那么表格的宽度和高度就是设置的值。不管你是否设置了单元格的高宽值,表格的高宽都已经限定了!如果没有设定,那么表格宽度高度则为单元格宽高(包括一些padding、border属性等)累积的总和。
fixed属性:
但是当设置了fixed属性的时候,如果表格设置了width属性height属性,如果设置的单元格宽高累加起来的总和比表格设置的宽高总和要大,那么表格的实际宽高就为每个单元格宽高累积的总和,但是如果单元格累积的总和比表格自己设计的要小,那么表格的宽高属性则为表格设置的宽高值。 ———————————————— 版权声明:本文为CSDN博主「#麻辣小龙虾#」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。 原文https://blog.csdn.net/CodingNoob/article/details/77503485
———————————————— 版权声明:本文为CSDN博主「#麻辣小龙虾#」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。 原文https://blog.csdn.net/CodingNoob/article/details/77503485
|