Javascript html中的灵活表格

我的桌子有问题

在第一个示例中，我使用div.，它可以通过css进行自定义。我说的是flex

但在第二个例子中，我使用了表。我无法为表设置css。至少我还没有在网上找到答案

所以我使用javascript。在第三个示例中，将计算宽度。我在iframe上设置了resize事件，因为它不能用于div，并且表的宽度可以由其他因素改变。所以我不想使用window.onresize=

对吗？如何解决这个问题

函数模拟ChangePanelWidth（）{
var right=document.querySelector（'.right'）；
var-width=parseInt（right.style.width）；
如果（宽度>=500）宽度=0；
right.style.width=（宽度+100）+“px”；
}
设置间隔（模拟更改面板宽度，2000年）；
帧[0]。onresize=e=>{
var wrap=document.querySelector（'.wrap'）；
var cols=wrap.querySelectorAll（'col'）；
变量宽度=0，弹性=0；
Array.prototype.forEach.call（cols，col=>{
var w=col.getAttribute（'data-width'）；
如果（w==null）{//flex
flex+=parseInt（col.getAttribute（'data-flex'）；
}否则{
宽度+=parseInt（w）；
}
});
变量段=（wrap.offsetWidth-宽度）/flex；
Array.prototype.forEach.call（cols，col=>{
var w=col.getAttribute（'data-width'）；
如果（w==null）{//flex
var flex=parseInt（col.getAttribute（'data-flex'）；
col.style.width=（段*flex）+“px”；
}否则{
col.style.width=w+‘px’；
}
});
}

正文{
保证金：0；
填充：0；
}
.柔性布局{
显示器：flex；
弯曲方向：行；
宽度：100%；
身高：100%；
位置：绝对位置；
}
.内容{
弹性：1；
}
.对{
}

数据1
数据2
数据3
数据1
数据2
数据3
数据1
数据2
数据3

我不明白问题出在哪里，您想要什么。我想计算一下列的宽度。但它是使用iframe计算的