Question

我搜索并看到这个问题被多次询问，但我似乎无法找到适合我当前布局的解决方案。

我有这个

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';

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

谢谢！

编辑：是的，它是一个模型，此时我无法访问真实的代码。

Answer 1

默认情况下，表格单元格具有填充，表格具有cellspacing以使其更好并且有条理。

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

Answer 2

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

因此，除非按以下方式重置值，否则带有空单元格的表将占用一些空间：

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

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

更符合标准的方法是：

table {
    border-spacing: 0;
}

给出了类似的效果，但是留下了一个2x4维度的表，所以有一些剩余空间。

最后，用于删除空间的最可靠的CSS方法是

tr {
    display: none;
}

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

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

小提琴演示：http://jsfiddle.net/audetwebdesign/MzzrV/

删除“display：none”d元素占用的“空格”

2 个答案: