问题:
其实也不算是bug,应该是写法上不够规范。
一般我们的table写法:
table{ table-layout:fixed; width:100%;}
<table>
<tbody>
<tr>
<th width="88">标题</th>
<td>很长的内容。。。</td>
</tr>
</tbody>
</table>
一般如上不会产生什么问题!
下面我们看看,今天碰到的一个问题。如图,
div{ display:inline-block;}
table{ table-layout:fixed; width:100%;}
<div>
<table>
<tbody>
<tr>
<th width="88">标题</th>
<td>很长的内容。。。</td>
</tr>
</tbody>
</table>
</div>
table的外层添加一个div,设置样式display:inline-block;
这样的情况下,问题就出现了:表格的结构会不稳定。
分析:
1.display:inline-block;是根据内容而改变宽度,也就是宽度不固定;
2.table的宽度设置100%,但是它的父层宽度又不固定,所有这个100%也无法确定多少;
3.一般th,td我们设置宽度都把最后一个设置为自动适应(前提是不会有我们这样的情况出现,table的宽度都不固定!)。
解决:
设置最后一个td的宽度或把div的display:inline-block;去掉!
表格是最稳固的结构。出现不稳定的情况比较少见!记录一笔,以此为戒!