手机版 | 登陆 | 注册 | 投稿 | 反馈留言 | 设首页 | 加收藏
网站首页 > 前端开发 > Div+CSS > div+css技术文章 >table-layout引起的探索——fixed和auto的区别

table-layout引起的探索——fixed和auto的区别

时间:2020-03-24    点击: 次    发布者:佚名 - 小 + 大


问题:最近想把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

 

  1. <!DOCTYPE html>  
  2. <html>  
  3.   
  4.     <head>  
  5.         <meta charset="UTF-8" />  
  6.         <style type="text/css">  
  7.             table.one {  
  8.                 table-layout: auto;  
  9.             }  
  10.               
  11.             table.two {  
  12.                 table-layout: fixed;  
  13.             }  
  14.         </style>  
  15.     </head>  
  16.   
  17.     <body>  
  18.   
  19.         <table class="one" border="1" width="100%">  
  20.             <tr>  
  21.                 <td width="20%">1000000000000000000000000000000000000000000000000000</td>  
  22.                 <td width="40%">10000000</td>  
  23.                 <td width="40%">100</td>  
  24.             </tr>  
  25.         </table>  
  26.   
  27.         <br />  
  28.   
  29.         <table class="two" border="1" width="100%">  
  30.             <tr>  
  31.                 <td width="20%">10000000000000000000000000002222222222222222</td>  
  32.                 <td width="40%">10000000</td>  
  33.                 <td width="40%">100</td>  
  34.             </tr>  
  35.         </table>  
  36.   
  37.     </body>  
  38.   
  39. </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



上一篇:td宽度超出table怎么办?css实现不再让内容把td撑开的常用解决方法

下一篇:overflow:hidden的作用(溢出隐藏、清除浮动、解决外边距塌陷等等)



Copyright © 2020 天人系列管理系统 版权所有,授权www.rjc.wang使用  Powered by 55TR.COM 运行代码测试页
锐教程网站www.rjc.wang由天天科技荣誉出品