ボタンをクリックしたときにテーブル内に<tbody>のデフォルトの非表示を表示

Question

私はボタンをクリックするとデフォルトの非表示tbodyを持つ簡単なテーブルを作成したい。それは私の仲間と並んで表示されます。

はここ

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

Answer 1

は少しjQueryを使ってそれを実行してください私の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です

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