問題：最近想把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重合
