在表格中隐藏/显示这些行的最佳解决方案是什么？答案

【问题标题】：What's the best solution to hide/show these rows in a table?在表格中隐藏/显示这些行的最佳解决方案是什么？
【发布时间】：2017-10-02 17:18:15
【问题描述】：

最初我以为我想在我的表格中实现可折叠的行，但我认为这不会真正起作用，因为间距和边距......所以我想了想并意识到我真正想做的就是隐藏和显示点击信息。

这是我正在使用的实际代码的示例：

.isaaccrm {
    
    float: left;
    height: 20px;
    width: 100px;
    }

    .zoho {
    
    height: 50px;
    width: 115px;
    padding-top: 10px;
    float: right;
    margin-right: 30px;
    
    }

    .salesforce {
    
    height: 60px;
    width: 90px;
    padding-top: 10px;
    padding-left: 20px;
    }

    .infusionsoft {
    
    height: 25px;
    width: 180px;
    padding-top: 5px;
    }

    .sugarcrm {
    
    height: 60px;
    width: 90px;
    padding-top: 10px;
    margin-right: 55px;
    float: right;
    }

    .comparisons {
    
    margin-top: 30px;
    margin-bottom: 30px;
    /* Make the comparison font into Lato*/
    
    }

    .center {
    
    text-align:center;
    
    }

<head>

</head>

<body>

    <table>
        <tr>
            <th></th>
            <th><img class="isaaccrm" src="http://isaacintelligence.com/wp-content/uploads/2017/04/ISAAC-logo-cropped.png"/></th>
            <th><img class="zoho" src="http://i.imgur.com/R8vz9iG.png"/></th>
            <th><img class="salesforce" src="http://i.imgur.com/UhUHB4P.png"/></th>
            <th><img class="infusionsoft" src="http://i.imgur.com/iGzEnUr.png"/> </th>
            <th><img class="sugarcrm" src="http://i.imgur.com/weilyrP.png"/></th>
        </tr>

        <tr>
            <th> <p class="comparisons">Operating Systems</p>
                <td class="center">Web</td>
                <td class="center">Web</td>
                <td class="center">Web</td>
                <td class="center">Web</td>
                <td class="center">Web</td>
            </th>
        </tr>

    </table>

</body>

这就是我网站上的样子：

操作系统是一行，我只想能够隐藏其中的数据，同时保持左侧的名称可见，然后单击显示该信息（循环继续）。当我说“隐藏”该数据时，我的意思是我希望行像折叠一样缩小，然后在单击时展开并显示数据。

有这种功能吗？

不胜感激

【问题讨论】：

.slideUp()/.slideDown()。不幸的是，表格行/单元格不能很好地工作，但您可以将内容包装在 div 中并滑动 div。或者，使用 div 进行布局而不是表格，那么您不会遇到这个问题。
你尝试过做什么？ stackoverflow.com/questions/12237163/…

标签： jquery html css html-table show-hide

【解决方案1】：

您可以尝试隐藏 .center 然后在 .comparisons click 上显示它们
所以，在 CSS 中

.center{display:none;}

然后在 JS 中

$('.comparisons').on('click', function(e) {
  e.preventDefault;
  $('.center').toggle();
});

希望这会有所帮助，（不解释很多，在移动设备上）SYA
这是fiddle

【讨论】：