根据表头文字实际宽度设置CSS宽度

上篇文章里讲到了封装一个可增减数据项的table组件，还提到了当数据项很多的时候，为了防止自适应导致表头文字受挤压，可以根据文字在浏览器中渲染后的实际宽度设置宽度，以保证文字不受挤压，当数据项多的时候用滚动条展示。

所以这篇文章介绍设置table每项数据的宽度：

ajustmentTableHeader（）

首先用document.getElementsByClassName( 'ant-table-thead' )获取到所有的table

再用getElementByTagName( 'tr' )获取到每个table的每一行表头（可能有两行表头，所以不能简单地用getElementByTagName( 'tr' ).[ 0 ]解决）

将第一行表头中的每项th和columns（表格列的配置描述），m（页面中第几个table）传入函数ajustmentEveryTableHeader

如果表头有两行，将第二行表头中的每项th和columns中含有子节点的节点的子节点（这里有点绕，意思就是判断出columns配置描述中哪些有子节点，然后把他们的子节点挨个儿传入函数），m（页面中第几个table）传入函数ajustmentEveryTableHeader

ajustmentEveryTableHeader（）

由于表头文字位于每个th下的div中，

所以，遍历th数组，并获取到每个th下的div

我们需要获取到表头文字在浏览器中渲染后的字体、字号、文本内容、是否加粗，将这些内容设置在一个凭空创建的span元素上，再将这个元素添加进table尾部，然后获取到这个span元素中文本的实际宽度，最后将获取到的实际宽度realWidth设置在对应th下的div样式里

if ( columns.find( item => item.title === text ) )

这一步的目的是：如果页面中有多个table，可我们需要看到的不一定是全部table时（比如页面是tab模式，每个tab中都有table，切换tab时虽然只看到一个table，实际页面中存在着多个table）。我们如果对每个table都通过操作DOM的方式修改width，会对性能造成很大的影响，而columns通常是切换到table后，渲染当前table的columns，配置描述是会变化的，所以用来判断获取到的div文本是否和当前table的表头文字一致：若一致，操作DOM修改width，否则不做任何操作

这一步的目的是：window.getComputedStyle这个方法获取到的width有三种可能

display为inline：width为auto

display为block：width为元素宽度

display为inline-block：width为元素内容的宽度

最后，移除span：table.removeChild( span );

当做什么都没有发生过，只是修改了div的宽度

在两个生命周期中调用修改width的函数，一个是componentDidMount，安装组件后立即调用，另一个是componentDidUpdate，发生更新时调用，并且加上checkedKeys值发生改变时调用的条件（否则增减数据项的时候，新增的数据项表头宽度不会发生变化，仍然是挤在一起的）

表头没有设置宽度的表格：

表头设置了宽度的表格：