使用js对table单元格隐藏显示操作出现单元格叠加问题

本文主要讲述在实现html界面table表格，js控制单元格的隐藏显示时，出现了单元格叠加而不平铺的问题及解决方案，详细如下：

1.标题栏单元格与值单元格均使用class选择器控制，代码如下：

表格标题栏：



表格值栏：



2.在页面加载时控制该class的display属性时出现单元格叠加问题，如下：

JS代码：



效果：



3.这其实并不是我们想要的效果，而应该是两个单元格平铺展开，那么也就是我们对display操作出现了问题，后来经查，block修饰的元素属于块级，而应该改为其他属性值。参考图如下：



4.后将display值改为：table-cell后正常，修改后如下：

解决代码：



解决后效果图：



以上均为自己遇到的情况，遂将问题记录了下来，如有问题请指出，及时更正