Table中width属性研究

下面分几种情况看看width属性对实际展示效果的影响（情况有很多种，我这里只是挑选常见的几种来分析研究）

1.table的width超过td的width之和

<table border="1" style="width:900px">
   <tr>
      <td width="100px">我很正常</td>
      <td width="200px">我很正常</td>
      <td width="300px">我很正常</td>
   </tr>
</table>

可以看到table的宽度保持不变，td会按照各自width的值近似等比例的缩放来填充table的宽度。

2.table的width小于td的width之和

<table border="1" style="width:500px">
   <tr>
      <td width="100px">我很正常</td>
      <td width="200px">我很正常</td>
      <td width="300px">我很正常</td>
   </tr>
</table>

可以看到table的宽度保持不变，td会按照各自width的值近似等比例的缩放来适应table的宽度

3.当有的字段内容过长时

<table border="1" style="width:600px">
   <tr>
      <td width="100px">我很长长长长长长长长长长长长长长长长长长</td>
      <td width="200px">我很正常</td>
      <td width="300px">我很正常</td>
   </tr>
</table>

td的宽度不足以放得下内容时，文本内容会自动换行显示，td的宽度保持不变（antd也是这样显示的），但是这样可能会导致行高参差不齐，看上去不太美观

4.当有的字段内容过长且td不换行时

td{
   white-space: nowrap;
}

<table border="1" style="width:600px">
   <tr>
      <td width="100px">我很长长长长长长长长长长长长长长长长长长</td>
      <td width="200px">我很正常</td>
      <td width="300px">我很正常</td>
   </tr>
</table>

可以看到table的宽度保持不变，第一列宽度扩充为文本的宽度，后两列近似按比例缩放以适应table的宽度

5.当td的width不设值，即为auto时

<table border="1" style="width:600px">
   <tr>
      <td>我很长长长长长长长长长长长长长长长长长长</td>
      <td>我很正常</td>
      <td>我很正常</td>
   </tr>
</table>

可以看到table的宽度保持不变，td的宽度近似按照td中内容的宽度等比例分配

6.当td的宽度部分不设值时

<table border="1" style="width:600px">
   <tr>
      <td width="100px">我很长长长长长长长长长长长长长长长长长长</td>
      <td width="200px">我很正常</td>
      <td>我很正常</td>
   </tr>
</table>

可以看到table的宽度保持不变，第一列自动扩充为文本宽度，第二列保持自己所设的width值，第三列自适应为剩余宽度；

当剩余宽度不够放下文本内容时，

<table border="1" style="width:600px">
   <tr>
      <td width="100px">我很长长长长长长长长长长长长长长长长长长</td>
      <td width="200px">我很正常</td>
      <td>我稍微有点点长</td>
   </tr>
</table>

可以看到table的宽度保持不变第三列填充为自身文本宽度，同时第二列缩放为剩余宽度。

综合上述几种情况，可以看到td的宽度会根据实际的内容长度和table的宽度来进行动态调整的。

结合实际应用，再说说最近使用的antd的组件，列属性中有个width的属性，如果每列均不配置width属性的话，则是按照上一节中分析的第5种情况，及按照每列的内容来调整每列的宽度，如下图所示：

这样可以让table自己根据内容来自适应调整每列的宽度，

而当需要表头固定时，则要求需要指定 column 的 width 属性，否则列头和内容可能不对齐。

这是因为这种情况表头和表格内容分属于两个不同的table

这样就会导致按照各自的内容去自适应产生合适的每列宽度，由于表头和表体的内容不一致，就会导致每列的宽度不一致，也就是展示出来的不对齐，因此要指定width值，这样表头和表体就会按照相同的比例来分配，这样每列的宽度也就一样了，也就对齐了。

如果每列都设置width的话，就会整体按比例缩放，参照上一节第1和第2种

如果最后一列不设置width的值的话，如antd官方实例中那样，那就参照上一节中第3种（antd中内容过长会自动换行）和第6种情况

设置了width的列实际宽度为设置的值，最后一列会根据table的宽度自适应调整。

知道table中width属性对显示的影响后，不同情况下的展示效果也就都能解释的通了。