JSFiddle - React, Tailwind, and code Playground

HTML

<table border=1 id="table_detail" align=center cellpadding=10>

<tr>
<th>名前</th>
<th>年齢</th>
<th>給料</th>
<th>仕事</th>
</tr>

<tr onclick="show_hide_row('hidden_row1');"><td>たける</td><td>25</td><td>9万</td><td>フリーター</td></tr>
<tr id="hidden_row1" class="hidden_row">
<td colspan=4>たける、25歳。会社員を目指すが現在はフリーターとしてアルバイトを2～3社で。月の給料は総額9万ほど。</td>
</tr>

<tr onclick="show_hide_row('hidden_row2');"><td>まさみ</td><td>29</td><td>40万</td><td>Webデザイナー</td></tr>
<tr id="hidden_row2" class="hidden_row">
<td colspan=4>まさみ、29歳。Webデザイナーとして3年間勤務。腕もよく企業からの信頼も厚い。手取りで40万。</td>
</tr>

<tr onclick="show_hide_row('hidden_row3');"><td>あつし</td><td>32</td><td>120万</td><td>経営コンサルタント</td></tr>
<tr id="hidden_row3" class="hidden_row">
<td colspan=4>Atsushi is 32 years old and he is a management consultant he earns 1200000 per month</td>
</tr>


</table>

CSS

body
{
 margin:0 auto;
 padding:0px;
 text-align:center;
 width:100%;
 font-family: "Myriad Pro","Helvetica Neue",Helvetica,Arial,Sans-Serif;
}
#wrapper
{
 margin:0 auto;
 padding:0px;
 text-align:center;
 width:995px;
}
#wrapper h1
{
 margin-top:50px;
 font-size:45px;
 color:#585858;
}
#wrapper h1 p
{
 font-size:20px;
}
#table_detail
{
 width:500px;
 text-align:left;
 border-collapse: collapse;
 color:#2E2E2E;
 border:#A4A4A4;
}
#table_detail tr:hover
{
 background-color:#ddd;
 cursor:pointer;
}
#table_detail .hidden_row
{
 display:none;
}

JavaScript

function show_hide_row(row)
{
 $("#"+row).toggle();
}