2020-09-23 Antd Table的auto布局和fixed布局

参考https://zhuanlan.zhihu.com/p/137218174
antd table内部使用的最基本的知识还是浏览器的原生html属性table。Antd默认使用了table-layout:auto，只有当表格需要加不换行功能或增加固定列时才会转成table-layout:fixed

antd table和原生table标签对应关系

• table：定义表格，对应css的display:table。
• caption：定义表格标题，对应css的display:table-caption。
• colgroup：在表格中定义一组列，对应css的display:table-column-group。
• col：在colgroup内定义列的属性，对应css的display:table-column。
• thead：定义表格的表头部分，对应css的display:table-header-group。
• tbody：定义表格的主体部分，对应css的display:table-row-group。
• tfoot：定义表格的尾部汇总部分，对应css的display:table-footer-group。
• tr：定义表格的行，对应css的display:table-row。
• th：定义表头的单元格，对应css的display:table-cell。
• td：定义表格的单元格，对应css的display:table-cell。

几个概念：

表格宽度 (TW) ：auto， 固定表格宽度：百分比，固定长度
表格真实宽度(realTW)
列宽度
列真实宽度(colW)
单元格宽度
列设置顶宽
单元格内容宽度
单元格内容最小宽度

auto和fixed区别

auto模式下，有四种宽度会影响表格布局

• 列宽度
• 单元格宽度
• 单元格内筒宽度
• 表格宽度

Auto

1. 情况1：表格中每一列设置定宽
   每一列的固定宽度为该列中设置的列宽度和所有单元格宽度的最大值。
2. 情况2：表格中每一列不设置定宽
   若表格宽度大于各列最小内容宽度的总和，则按照单元格内容宽度展开
   否则，若按比例缩小的宽度小于最小单元格内容宽度，真实列宽度为最小列宽度，其他列继续按单元格内容比例缩小
3. 情况3：表格中部分列设置定宽：
   设置列宽度的则按照定列宽度显示，其他按单元内容宽度分配剩余空间。若无剩余空间，则按单元格最小宽度显示，固定列按照固定宽度比例缩放。

Fixed

• 列宽度
• 单元格宽度：只获取第一行的单元格宽度，其他行忽略
• 表格宽度
  和auto区别：如果某一列同时设置了colWidth和cellWidth，优先级是colWidth>cellWidth

1. 情况1：表格中每一列设置定宽
   每一列的最小宽度为该列设置的列宽度
   表格的最小宽度即各列最小宽度的加和
2. 情况2：表格中每一列不设置定宽
   所有列等分表格的宽度，表格宽度小的时候单元格内容溢出
3. 情况3：表格中部分列设置定宽：
   设置列宽度的则按照定列宽度显示，其他按单元内容宽度分配剩余空间。若设置列宽度小于固定列宽度的总和时，不定列宽度为0，单元格内容会游离在表格外

总结

antd的表格默认是auto的
fixed的布局是不会受单元格内容控制的，是什么就是什么