Question

问题：

我正在使用JQuery折叠我的表，但我面临两个问题之一（取决于我采取的路线）。如果我使用display: none折叠，则会重新格式化整个表格。如果我使用visibility: collapse折叠，即使它不再可见，所有空间仍然会从桌面上占用。

照片澄清

扩展表（底部用于定位参考） Expanded Table 折叠表display: none Collapsed Table 折叠表visibility: collapse

代码

的Javascript / JQuery的：

function hideTable(name) {
    $('#' + name + ' tr:gt(0)').css("visibility", "collapse");
    //$('#' + name + ' tr:gt(0)').css("display", "none");
    $('#' + name).find("#collapse").attr("onclick", "showTable(\'" + name + "\')");
}

function showTable(name) {
    $('#' + name + ' tr:gt(0)').css("visibility", "visible");
    //$('#' + name + ' tr:gt(0)').css("display", "table-row");
    $('#' + name).find("#collapse").attr("onclick", "hideTable(\'" + name + "\')");
}

HTML：

    <div id="tables">
        <center>
                   <table style="width: 35%;" id="test">
           <tr id="collapse" onclick="hideTable('test');">
               <th>One</th>
               <th>Two</th>
               <th>Three</th>
               <th>Four</th>
           </tr>
           <tr>
               <td>2147000000</td>
               <td>2147000000</td>
               <td>2147000000</td>
               <td>2147000000</td>
           </tr>
       </table>
       <br>
       <table style="width: 35%;" id="test2">
           <tr id="collapse" onclick="hideTable('test2');">
               <th>One</th>
               <th>Two</th>
               <th>Three</th>
               <th>Four</th>
           </tr>
           <tr>
               <td>2147000000</td>
               <td>2147000000</td>
               <td>2147000000</td>
               <td>2147000000</td>
           </tr>
       </table>
       <br>
    </center>
 </div>

CSS（仅与表格式相关的css）：

table {
    border-collapse: collapse;
}

css的其余部分都是外观，除了填充和表格的边框以及它的单元格之外，不再进行定位/格式化

我正在寻找

我正在寻找一些工作来获得visibility: collapse的格式（表格标题保持对齐）和display: none的大小（不可见的行不占用空间）。我做了我的研究，空手而归。

如果这个问题以任何方式构建得不好，请在投票前告诉我，以便我可以进行编辑，或者随意编辑它们。感谢。

我已经回答了我自己的问题。对于我的解决方案，请参阅我的回答或我的JSFiddle。

Answer 1

我有一个解决方法，通过CSS尝试将标题中的修复填充大于您在tds中的预期。

http://fiddle.jshell.net/7kjen9gf/

th {   
    padding: 30px;
 }

Answer 2

我为你找到了解决方案。

只需在表格中添加另一种样式：

table-layout:fixed;

然后问题就会消失。干杯......

Answer 3

为表列指定宽度，以便它不会影响任何布局问题。

 <tr id="collapse" onclick="hideTable('test');">
            <th width="25%">One</th>
            <th width="25%">Two</th>
            <th width="25%">Three</th>
            <th width="25%">Four</th>
 </tr>

DEMO

Answer 4

最终解决方案

我改进了隐藏和显示表格的方法，因此它完全是动态的。它允许表格折叠而不改变标题的大小或位置，并且可以在不限制它们的情况下工作。

function hideTable(name) {
    var rows = $('#' + name + ' tr:gt(0)');
    var columns = document.getElementById(name).getElementsByTagName('td');
    var count = (columns.length / rows.size());
    var bigArray = new Array(rows.size());

    for (var i = 0; i < bigArray.length; i++) {
        bigArray[i] = new Array(count);
    }

    for (var i = 0; i < rows.size(); i++) {
        var count2 = rows.get(i).cells.length;
        for (var j = 0; j < count2; j++) {
            var bounds = rows[i].getElementsByTagName('span')[j].getBoundingClientRect();
            bigArray[i][j] = bounds.width;
        }
    }


    var insertRow = document.getElementById(name).insertRow(rows.size() + 1);

    for (var x = 0; x < bigArray[0].length; x++) {
        var biggest = -1;
        for (var y = 0; y < bigArray.length; y++) {
            if (bigArray[y][x] > biggest) {
                biggest = bigArray[y][x];
            }
        }
        insertRow.insertCell(x).innerHTML = '<span style="float: left; width: ' + biggest + 'px;">...</span>';
    }

    insertRow.style.visibility = "collapse";

    for (var i = 2; i < rows.size() + 2; i++) {
        $('#' + name + ' tr:nth-child(' + i + ')').fadeOut();
    }

    $('#' + name).find("#collapse").attr("onclick", "showTable(\'" + name + "\')");
}

function showTable(name) {
    var v = $('#' + name + ' tr:gt(0)');
    document.getElementById(name).deleteRow(v.size());
    v.fadeIn('slow');

    $('#' + name).find("#collapse").attr("onclick", "hideTable(\'" + name + "\')");
}

HTML必须如下所示：

        <table style="width: 35%;" id="test">
            <tr id="collapse" onclick="hideTable('test');">
                <th>One</th>
                <th>Two</th>
                <th>Three</th>
                <th>Four</th>
            </tr>
            <tr>
                <!--content size not relevant to functionality.-->
                <td><span>Very large content</span></td>
                <td><span>Smaller content</span></td>
                <td><span>Smaller</span></td>
                <td><span>THE BIGGEST CONTENT IN THE TABLE</span></td>
            </tr>
        </table>

基本CSS看起来像这样：

table {
    border-collapse:collapse;
    white-space: nowrap;
}

基本上，hide方法会扫描表中的每一行，并查找列中内容的最大宽度，因为这是表格的格式。然后，它在其中添加填充行宽度浮动固定大小跨度，其等于每行中最大列的大小。之后，它隐藏了display: none所有其他行，迫使表不占用任何空间。此填充行也可以隐藏，但只能使用visibility: collapse | hidden，否则无效。

折叠表没有重新布局

问题：

照片澄清

代码

我正在寻找

4 个答案:

最终解决方案