Javascript 表在不同屏幕大小上看起来不一致

我有一个文本填充表，分为4列（如下图所示），其中显示了所有子类别（级别2和级别3子类别）。此表看起来并不一致（有些列显示得比其他列长），在不同的屏幕大小（不同的笔记本电脑大小）和不同的设备上，甚至在我尝试使用@media查询使其响应之后。有没有办法解决这个问题，使所有的列看起来总是一致的

我用过媒体

.tblcol{
宽度：22%；
文本对齐：左对齐；
字体大小：11px；
字体系列：“Palatino Linotype”；
}
.标题{
背景色：#790102；
颜色：#ffffff；
填充：2px；
}
a{
文字装饰：无；
}
.标语{
颜色：#790102；
字母间距：8px；
字号：18px
}
@介质（最大宽度：1023px）{
.类别表1{
宽度：500px；
}
}
@介质（最小宽度：1024px）和（最大宽度：1010px）{
.类别表1{
宽度：680px；
}
}
@介质（最小宽度：1011px）和（最大宽度：1300px）{
.类别表1{
宽度：740px；
}
}
@介质（最小宽度：1224px）和（最大宽度：1400px）{
.类别表1{
宽度：850px；
}
}
@介质（最小宽度：1410px）{
.类别表1{
宽度：970px；
}
}

1500多种商品*45种产品*14个类别

。标语{
颜色：#790102；
字母间距：8px；
字号：18px
}
.标题{
背景色：#790102；
颜色：#ffffff；
填充：2px；
}
a{
文字装饰：无；
}
桌子{
边界塌陷：塌陷；
宽度：100%；
}
运输署，
th{
文本对齐：左对齐；
填充：8px；
字体大小：11px；
字体系列：“Palatino Linotype”；
}

1500多种商品*45种产品*14个类别

谢谢Shyam，但我关心的是窗口的大小。表列看起来不再统一了。你对如何处理这个问题有什么建议吗？你能分享一些与你期望的相似的图片吗？