什么导致table不稳固？

问题：

其实也不算是bug，应该是写法上不够规范。

一般我们的table写法：

table{ table-layout:fixed; 100%;}

<table>
  <tbody>
    <tr>
      <th width="88">标题</th>
      <td>很长的内容。。。</td>
    </tr>
  </tbody>
</table>

一般如上不会产生什么问题！

 

下面我们看看，今天碰到的一个问题。如图，

div{ display:inline-block;}
table{ table-layout:fixed; 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;去掉！

表格是最稳固的结构。出现不稳定的情况比较少见！记录一笔，以此为戒！