HTML中table设置visibility和display属性不生效问题求助

问题根源 #

你混淆了CSS属性和HTML原生属性的用法，visibility 是CSS规则属性，不能直接作为HTML标签的自定义属性书写，浏览器不会识别你直接写在table标签上的visibility="hidden"属性，所以设置不生效。你尝试设置display:none没生效大概率也是用了同样的错误写法，直接把display当HTML属性写了。

解决方法 #

• 方法1：用内联style属性写CSS规则
  把table标签的属性修改为如下写法即可生效：

  <table id="detailsTable" style="visibility: hidden;">
  

  如果要使用display隐藏，写法为：

  <table id="detailsTable" style="display: none;">
  

• 方法2：通过CSS选择器统一设置规则
  在你的样式文件或者页面<style>标签中加入如下代码：

  #detailsTable {
    visibility: hidden;
    /* 如需不保留元素占位可替换为下面的规则 */
    /* display: none; */
  }
  

两种隐藏属性的差异：

• visibility: hidden：仅隐藏元素视觉展示，元素原本在页面中占据的空间会保留
• display: none：将元素从页面渲染流中完全移除，不保留原有占位

修正后的完整代码 #

<blockquote>
    <table id="detailsTable" style="visibility: hidden;">
        <thead>
            <tr>
                <th colspan="2">Employé : Veuillez saisir un nom ou bien un matricule</th>
            </tr>
        </thead>
        <tbody>
      
      
      </tbody>
    </table>
</blockquote>

内容的提问来源于stack exchange，提问作者kim