table宽度

jone5679 发布于2019-08-01 16:07 / 3288人阅读

摘要：题目虽然是说的宽度，但其实最让人抓狂的是单元格的宽度。表格的宽度有决定，列的宽度有首行单元格的决定。如果单元格的值为，则最小单元格宽度为为最小内容宽度。最大列宽必须等于这个单元格的最大单元格宽度。

题目虽然是说table的宽度，但其实最让人抓狂的是单元格td的宽度。平时开发中也经常会遇到这方面的问题，所以我找资料学习table的宽度的算法。

table-layout

table-layout定义了表格布局算法，值为auto或fixed。

fixed

采用固定表格布局算法对表格布局。表格的宽度有width决定，列的宽度有首行单元格的width决定。
先上一个demo。
分析一下，这里table计算宽度为200px，第一列的计算宽度为100px，第二列计算宽度为20px，第三列和第四列的计算宽度为33px。第三列和第四列的宽度是由table
宽度减第一列和第二列宽度之和以及单元格左右border宽度，再除以2得到。也许你会问，为什么“1-3”所在td不是定义了width吗？为什么第三列是计算得到的？答：因为定义了width的td不位于首行，th才是位于首行。

规则

如果设置了列元素（col），列元素的width被设置为列的宽度。demo

列元素的width为auto，或者没有设置列元素（如第一个demo），首行单元格的width将被设置为所在列的宽度。

如果不符合以上两种情况，则由浏览器计算确定。

auto（默认值）

采用自动表格布局算法对表格布局。表格及单元格的宽度取决于其包含的内容（还是可以为单元格设置width的）。

规则

计算最小单元格宽度

1.1 计算每个单元格的最小内容宽度：内容可以流入多行，但不能超出单元格。
1.2 如果单元格的width值大于最小可能宽度，则最小单元格宽度为单元格的width值。
1.3 如果单元格的width值为auto，则最小单元格宽度为为最小内容宽度。

计算最大单元格宽度：完全显示内容且不换行（不考虑显示换行）时所需的宽度

计算最小列宽：该列中所有单元格的最小单元格宽度的最大值

计算最大列宽：该列中所有单元格的最大单元格宽度的最大值

如果单元格跨列，最小列宽之和必须等于这个跨列单元格的最小单元格宽度。最大列宽必须等于这个单元格的最大单元格宽度。

demo

其他

但table的width为auto时，即使table-layout为fixed，都会采用自动布局算法。demo

参考

W3C CSS2.1中文文档

MDN

CSS权威指南

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/50309.html

table宽度

摘要：题目虽然是说的宽度，但其实最让人抓狂的是单元格的宽度。表格的宽度有决定，列的宽度有首行单元格的决定。如果单元格的值为，则最小单元格宽度为为最小内容宽度。最大列宽必须等于这个单元格的最大单元格宽度。题目虽然是说table的宽度，但其实最让人抓狂的是单元格td的宽度。平时开发中也经常会遇到这方面的问题，所以我找资料学习table的宽度的算法。 table-layout table-lay...

GHOST_349178 2019-08-30 13:15 评论0 收藏0
css table布局大法，解决你大部分居中、多列等高、左右布局的问题

摘要：基于这样的布局方式，你就可以把什么定高不定高定宽不定宽多行单行的水平垂直居中都搞定了。且不支持这就是所谓的布局大法。看了这篇文章，你可以了解到以下布局方法： table-cell 定高水平垂直居中不定高水平垂直居中单行定高水平垂直居中单行不定高水平垂直居中多行定高水平垂直居中多行不定高水平垂直居中多列等高布局左边定宽右边自适应布局左边右边定宽中间自适应三列布局最...

lijinke666 2019-08-29 11:22 评论0 收藏0
css table布局大法，解决你大部分居中、多列等高、左右布局的问题

摘要：基于这样的布局方式，你就可以把什么定高不定高定宽不定宽多行单行的水平垂直居中都搞定了。且不支持这就是所谓的布局大法。看了这篇文章，你可以了解到以下布局方法： table-cell 定高水平垂直居中不定高水平垂直居中单行定高水平垂直居中单行不定高水平垂直居中多行定高水平垂直居中多行不定高水平垂直居中多列等高布局左边定宽右边自适应布局左边右边定宽中间自适应三列布局最...

hedge_hog 2019-08-20 11:16 评论0 收藏0
css table布局大法，解决你大部分居中、多列等高、左右布局的问题

摘要：基于这样的布局方式，你就可以把什么定高不定高定宽不定宽多行单行的水平垂直居中都搞定了。且不支持这就是所谓的布局大法。看了这篇文章，你可以了解到以下布局方法： table-cell 定高水平垂直居中不定高水平垂直居中单行定高水平垂直居中单行不定高水平垂直居中多行定高水平垂直居中多行不定高水平垂直居中多列等高布局左边定宽右边自适应布局左边右边定宽中间自适应三列布局最...

kun_jian 2019-08-01 15:45 评论0 收藏0
css页面布局技巧

摘要：一居中布局居中布局水平居中宽度自适应变成行内块元素，让元素宽度自适应，不继承父元素宽度变成元素，可以让元素宽度自适应，不继承父元素宽度定位，可以让元素宽度自适应，不继承父元素宽度或者垂直居中高度自适应变成类似元素定位，一、居中布局居中布局水平居中（宽度自适应） 1.inline-block + text-align .child{ display:inline...

刘明 2019-08-30 15:44 评论0 收藏0