chrome中display的用法

最新推荐文章于 2022-10-13 22:02:53 发布

ZSYu979

最新推荐文章于 2022-10-13 22:02:53 发布

阅读量589

点赞数

分类专栏：自主解决各种疑难杂症文章标签： css js

本文链接：https://blog.csdn.net/maweizz/article/details/119177617

版权

在网页开发中，使用display属性结合JS控制按钮点击以实现表格的显示与隐藏，但遇到表体挤压到左侧的问题。通过研究发现，display属性在Chrome中对表格元素有特定的值，如table-row-group，将display属性值改为table-row-group后，问题得到解决。了解display属性的正确使用对于避免此类布局问题至关重要。

摘要由CSDN通过智能技术生成

起因：最近在写网页的时候，我为了实现按钮的点击加载或隐藏表格中的表体
实操：我使用了display，我将<tbody>标签中加入了display：<tbody id="id123" style="display:none">，然后使用js代码操控按钮的点击事件，实现<tbody>的显示与隐藏，我在js代码中的点击事件中写到document.all.id123.style.display="block"，将获取id为id123的标签的style属性中的display属性，将其改变为block值
发生问题：写完代码，测试程序，点击按钮，发现表体都挤到了最左侧一列，难道chrome不支持display属性嘛？查阅了众多资料中发现没有和我完全相同遭遇的人，我去查了一下前段百科网站，发现display有好多属性值，借用百科网站的总结：

值	描述
none	此元素不会被显示。
block	此元素将显示为块级元素，此元素前后会带有换行符。
inline	默认。此元素会被显示为内联元素，元素前后没有换行符。
inline-block	行内块元素。（CSS2.1 新增的值）
list-item