-1

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

我有这个

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

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

谢谢！

编辑：是的，这是一个模型，我目前无法访问真实代码。

4

2 回答 2

2

默认情况下，表格单元格具有填充，表格具有单元格间距以使其美观且有条理。

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

于 2013-09-01T15:00:01.010 回答
0

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

因此，除非您按如下方式重置值，否则包含空单元格的表格将占用一些空间：

<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/

于 2013-09-01T15:13:41.577 回答