html - CSS border-collapse 在 <table> 中不起作用

Question

我很难让 border-collapse 为我工作。我正在使用的页面中有一个表格。该表有 2 列，一列用于标签，另一列用于数据。有时没有数据显示，但我仍然需要修改表格行和标签列，因为我有一个JQuery脚本可能需要将数据写入数据列。换句话说，不管有没有数据，我都需要将表格行作为占位符。如果没有数据，我希望该行折叠。

在下面的 html 中，visibility:hidden 正常工作，因为我看不到标签“Condition:”，但该行没有折叠。我试过在 FireFox 13、Safari 5 和 IE 8 中查看它。所有三个都显示相同的问题 - 即使它不显示任何内容，该行也不会折叠。

#data
{
    font-size: 95%;
}
#data table
{
    border-collapse: collapse;
    margin-top: 15px;
    margin-bottom: 15px;
}
#data table td
{
    padding-left: 5px;
}


<div id="data">

....

    <table>
        <tr style="visibility:hidden;">
            <td><div class="datalabel">Condition:</div></td>
            <td class="datainfo"></td>
        </tr>
    </table>

....

</div>

我还需要做些什么才能实现这一点？我希望它是跨浏览器兼容的。我正在尝试支持 IE7 及更高版本。我猜有人会因为一开始就使用 table 而让我见鬼去吧……;)

Answer 1

The visibility property determines whether a given element is visible or not (visibility="visible|hidden"). However, when visibility is set to hidden, the element being hidden still occupies its same place in the layout of the page.

Display VS Visibility

使用display:none;隐藏和display:block;显示

   <table style="border-collapse:collapse;">
        <tr style="display:none;">
            <td><div class="datalabel">Condition:</div></td>
            <td class="datainfo"></td>
        </tr>
    </table>

注意:border-collapse:collapse; 用于为容器和包含的对象指定边框并且希望边框显示一次的情况。