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及以上版本。我猜第一个地方有人打算让我使用桌子......;）

Answer 1

visibility属性确定给定元素是否可见或不（visibility =“visible | hidden”）。但是，当设置可见性时为了隐藏，被隐藏的元素仍然占据着相同的位置页面的布局。

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;用于以下情况：您可以为容器指定边框，并且您希望边框显示一次。

Answer 2

<table border="0" cellpading="0" cellspacing="0">

如果单元格中没有数据，请尝试使用&nbps;或类似内容

类似的东西：

<table border="0" cellpading="0" cellspacing="0">
    <tr style="visibility:hidden;">
        <td><div class="datalabel">Condition:</div></td>
        <td class="datainfo">&nbsp;</td>
    </tr>
</table>

CSS border-collapse在<table> </table>中无法正常工作

2 个答案: