html - 可见性属性在 html 文件中不起作用

Question

我将表格上的可见性标签设置为隐藏，但在显示时它仍然可见。我也尝试过显示：无。有谁知道这个问题？

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

标签： html

Answer 1

可见性是一个样式属性 - 不是表格属性 - 只需在你的 CSS 中应用可见性样式规则，它就会隐藏。

我已将样式放入 css - 并单击按钮切换一个类。如果该类是隐藏表 - 那么可见性：隐藏将适用并...隐藏表。我在桌子上放了一个边框以突出显示这些州。

请注意，应用样式并将其附加到添加或删除的类总是更好 - 而不是使用 javascript 直接更改元素上的样式属性。

function toggleTableVisibility(){
  const table = document.querySelector('#detailsTable');
  table.classList.toggle('hide-table')
}

#detailsTable{
  border: solid 1px red;
  visibility:visible
}


#detailsTable.hide-table{
 visibility:hidden
}

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

<button type="button" onclick="toggleTableVisibility()">toggle table visiblity</button>