深入理解 1% table-cell width

发表于 2015-09-12 | 分类于 前端学习
今天在写页面时遇到一个有趣的前端问题，拿出来分享一下。

问题描述
今天在使用Bootstrap给页面添加底部导航栏时，需要在手机下也使导航栏呈现水平排列的效果。最后在网上查找解决方法是，看到这样一个解决方法：

.nav-justified > li {
display: table-cell;
width: 1%;
}
而且确实奏效了，但是代码很有意思，我便另外试了试，如果width为百分数，发现随着width值的改变，。这也算前端的一个hack方法，也有许多人已经研究过，推荐一个别人写的网站，可以调试这个方法。http://codepen.io/ld0rman/pen/FCiLh

问题理解
在这里，我在查看了网上的资料后也讲讲我自己的理解。

实际上，有关表的宽度计算是件挺麻烦的事情，这也不是我们的重点，之间先来看看我把table-cell的width设为1%，为什么会出现这样的结果好了。

这里我们利用”display: table-cell”使得每个li元素变成了一个表格中的单元格，注意到我们并没有这个单元格添加外层的表格布局，但是实际上浏览器会默认添加一个隐藏的table，它默认的布局是”table-layout: auto”，所以这个表格的大小是根据单元格的大小确定的。有前端基础的都知道，表格中每个单元格是有自己的最小宽度的，这样我们设置了”width: 1%”实际上是设置table的大小为单元格的最小宽度的100倍。但是很明显，表格是不可能这么宽的，这里可以理解为让表格的宽度尽可能的宽。而且根据单元格必须填满表格一行的特性，就自然呈现出这样的效果。

为了验证，你把width设置为10%时，你会发现表格变小了，也是因为表格大小变成了最小单元格的宽度的10倍，这样也可以解释了

另外如果我把width设置为100%时，会发现第一个单元格非常大然而，其他的也还是存在，但是都被压缩了。我是这样理解的——首先第一个单元格的宽度为100%的话，那么就是表格的大小了，但是这一行还有其他的单元格存在，它是不可能达到100%的，所以第一个尽可能宽，而其他的也能有最小宽度。

问题总结
根据width的值不同，表格会有不同的表现，可以分成两种情况。这里我们需要先计算width =（表格的最大宽度）×width的结果

计算出的width小于单元格最小宽度
这种情况下就是以单元格的最小宽度为width，再计算表格应有的大小，再分别各个单元格

计算出的width大于单元格最小宽度
这种情况下就从第一个单元格起尽量满足它的宽度，但是要保证后面的单元至少有它的最小宽度