单击按钮时在表格中显示默认隐藏的 <tbody>

Question

我喜欢创建一个具有默认隐藏 tbody 的简单表格，所以当我单击按钮时。它将与我的广告对齐显示。

这是我的html

    <div id="show">
        <table>
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Item Name</th>
                    <th>Item Price</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Alvin</td>
                    <td>Eclair</td>
                    <td>$0.87</td>
                </tr>
            </tbody>
        </table>
    </div>

    <a href="#show">Show table body</a>

还有 CSS

    <style type="text/css">
        #show:target tbody td{
            display: inline-block;
        }
        table {
            border-collapse:collapse;
        }
        tbody td{
            display: none;
        }
     </style>

Answer 1

用小 jquery 来做

$('#show').on('click', function(){
  $('tbody td').css('display','table-cell');
});