卸下'空格'由“;显示:无”;d元素

Removing the 'spaces' occupied by "display:none"d elements

本文关键字：元素 空格 卸下 显示      更新时间：2023-09-26

我搜索了一下，发现这个问题被问了很多次，但我似乎找不到适合我当前布局的解决方案。

我有这个

html:

<div>
   <table>
      <tr>
         <td>
            <input type="button" id="buttonHello" class="hiddenButton">
            <b id="textHello">
         </td>
      </tr>
      <tr>
         <td>
            <input type="button" id="buttonBye" class="hiddenButton">
            <b id="textBye">
         </td>
      </tr>
   </table>
</div>

css：

.hiddenButton{
    display:none;
}

在我的js中，当我做这样的事情时，

if (something) document.getElementById('buttonBye').style.display='inline';

我仍然得到了未显示的按钮和文本所占据的空间。我尝试了不同的解决方案，但没有一个是一致的。

谢谢！

edit：是的，这是一个模型，我现在还不能访问真正的代码。

默认情况下，表格单元格有填充，表格有单元格间距，使其美观有序。

为了完全隐藏这些，您需要实际切换<tr>元素的display，而不是它们的内容。

根据浏览器的不同，表的单元格间距和单元格填充有一个默认值（非零）。

因此，如果不按如下方式重置值，带有空单元格的表将占用一些空间：

<table cellpadding="0" cellspacing="0">

通过添加这些属性，表将折叠为0x0维度。（基于使用Firefox检查table元素。）

更符合标准的方法是：

table {
    border-spacing: 0;
}

这给出了类似的效果，但留下了一个2x4维度的表，因此有一点剩余空间。

最后，去除空间最可靠的CSS方法是

tr {
    display: none;
}

（只需记住使用display: table-row重置原始显示类型即可。）

从HTML5开始，cellpadding和cellspacing已经过时，但浏览器仍然可以响应这些属性。

Fiddle演示：http://jsfiddle.net/audetwebdesign/MzzrV/

相关文章：