Javascript 根据列标题中的文本动态设置列标题的宽度

我正在制作一张如下所示的表格

现在列的宽度不变。是指向我的代码的链接。 我们可以看到，第二列占用的空间比它所需要的要多

我的问题是，我们能否根据列的内容控制列的宽度，同时保持表标题倾斜的表的当前设置

*{
框四星：边框框；
}
欧特尔迪夫先生{
//背景：灰色；
高度：200px；
宽度：100px；
边框：1px纯黑；
边界底部：0；
左边框：0；
变换：倾斜（-30度）translateX（58%）；
}
第四：第一个孩子{
左边框：1px纯黑；
位置：相对位置；
}
.innerDiv{
位置：绝对位置；
宽度：220px；
高度：85px；
底部-34%；
左：10px；
变换：倾斜（30度）旋转（-60度）；
变换原点：0；
文本对齐：左对齐；
}
身体，
html{
身高：100%；
}
身体{
显示器：flex；
证明内容：中心；
}
桌子{
边界塌陷：塌陷；
}
运输署{
边框：1px纯黑；
}

第一列标题单元格很长
第二列
第三列标题单元格非常长
目标
5.
26
9
第75百分位
5.
26
9
第50百分位
5.
26
9
第25百分位
5.
26
9

您可以使用

显示：网格

并使用

网格自动列

或

网格自动行

和

最小内容

值：