0

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

在下面的 html 中，visibility:hidden因为我看不到标签“条件：”，所以它正在工作，但该行不会折叠。我尝试在 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 border="0" cellpading="0" cellspacing="0">

&nbps;如果单元格中没有数据，请尝试使用 and或类似的东西

就像是：

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

2 回答 2

5

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

显示 VS 可见性

用来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;用于为容器和包含的指定边框并且希望边框显示一次的情况。

于 2012-06-23T02:08:26.887 回答
0 
<table border="0" cellpading="0" cellspacing="0">

&nbps;如果单元格中没有数据，请尝试使用 and或类似的东西

就像是：

<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>
于 2012-06-23T01:54:57.330 回答