jquery - 折叠表格而不重新布局

Question

问题:

我正在使用 JQuery 折叠我的表格，但面临两个问题之一(取决于我采取的路线)。如果我用 display: none 崩溃，整个表将被重新格式化。如果我使用 visibility: collapse 折叠，即使表格不再可见，所有空间仍会被占用。

---

照片澄清

展开表(下图定位引用) 带有 display: none 的折叠表 具有 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;
 }