Question

我创建了一个表，并使用折叠可见性来尝试隐藏显示的许多列。列仍然显示，只是它们显示为空白。我希望它显示，好像那些列不存在。原因是有一个搜索框搜索表数据。我希望它能够搜索这些项目但不显示它们。

<table id='example1' class='table table-bordered table-striped'>
    <thead>
        <tr>
            <th>Ticket #</th>
            <th>Date</th>
            <th>Subject</th>
            <th>Status</th>
            <th>Close Date</th>
            <th>Assigned To</th>
            <th>Work Order</th>
            <th style='visibility:collapse;'>TID #</th>
            <th style='visibility:collapse;'>Modem #</th>
            <th style='visibility:collapse;'>MHL #</th>
            <th style='visibility:collapse;'>Waybill #</th>
            <th style='visibility:collapse;'>TID #</th>
            <th style='visibility:collapse;'>ATM Brand</th>
            <th style='visibility:collapse;'>ATM Model</th>
            <th style='visibility:collapse;'>EPP Serial</th>
            <th style='visibility:collapse;'>Router #</th>
        </tr>
    </thead>
    <tbody>"; // output data of each row 
while($row = $result->fetch_assoc()) { $href='"#"'; echo "
        <tr>
            <td><a href='tickets.php?id=".$row[' id ']."'>".$row['id']."</a>
            </td>
            <td>".$row['timecreated']."</td>
            <td>".$row['subject']."</td>
            <td>".$row['status']."</td>
            <td>".$row['closedate']."</td>
            <td>".$row['assignedtoname']."</td>
            <td>".$row['workorder']."</td>
            <td style='visibility:collapse;'></td>
            <td style='visibility:collapse;'></td>
            <td style='visibility:collapse;'></td>
            <td style='visibility:collapse;'></td>
            <td style='visibility:collapse;'></td>
            <td style='visibility:collapse;'></td>
            <td style='visibility:collapse;'></td>
            <td style='visibility:collapse;'></td>
            <td style='visibility:collapse;'></td>
        </tr>"; } } else { echo "0 results"; } echo "</tbody>
    <tfoot>
        <tr>
            <th>Ticket #</th>
            <th>Date</th>
            <th>Subject</th>
            <th>Status</th>
            <th>Close Date</th>
            <th>Assigned To</th>
            <th>Work Order</th>
            <th style='visibility:collapse;'>TID #</th>
            <th style='visibility:collapse;'>Modem #</th>
            <th style='visibility:collapse;'>MHL #</th>
            <th style='visibility:collapse;'>Waybill #</th>
            <th style='visibility:collapse;'>TID #</th>
            <th style='visibility:collapse;'>ATM Brand</th>
            <th style='visibility:collapse;'>ATM Model</th>
            <th style='visibility:collapse;'>EPP Serial</th>
            <th style='visibility:collapse;'>Router #</th>
        </tr>
    </tfoot>
</table>

Answer 1

更改“公开程度：崩溃;” “display：none;”

Answer 2

根据https://developer.mozilla.org/en-US/docs/Web/CSS/visibility，您似乎不得不使用display none。

collapse对于表行，列，列组和行组隐藏行或列，以及它们占用的空间被删除（就像显示：没有被应用到的列/行）表）。但是，其他行和列的大小仍然是计算好像折叠的行或列中的单元格一样存在。这是为了从a快速删除行/列而设计的表格无需重新计算每个的宽度和高度表的一部分。对于XUL元素，计算出的大小无论通常的其他样式如何，元素始终为零虽然利润率仍然有效，但影响规模。对于其他元素，崩溃被视为隐藏。

在引导表中隐藏表列

2 个答案: