JSFiddle - React, Tailwind, and code Playground

HTML

<div class="pronlink" id="togglePron">Show/hide Pronunciation</div>
<br />
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td nowrap>
<div class="col" >
<div class="gr"></div>
<div class="zi">（
</div>
</div>
</td>

<td nowrap>
<div class="col" title="[Zhong1 yang1 she4] /Central News Agency (Taiwan)/">
<div class="gr">jong</div>
<div class="zi">中
</div>
</div>
</td>

<td nowrap>
<div class="col" title="[Zhong1 yang1 she4] /Central News Agency (Taiwan)/">
<div class="gr">iang</div>
<div class="zi">央
</div>
</div>
</td>

<td nowrap>
<div class="col" title="[Zhong1 yang1 she4] /Central News Agency (Taiwan)/">
<div class="gr">sheh</div>
<div class="zi">社
</div>
</div>
</td>

<td nowrap>
<div class="col" title="[ji4 zhe3] /reporter/journalist/CL:個|个[ge4]/">
<div class="gr">jih</div>
<div class="zi">記
</div>
</div>
</td>

<td nowrap>
<div class="col" title="[ji4 zhe3] /reporter/journalist/CL:個|个[ge4]/">
<div class="gr">jee</div>
<div class="zi">者
</div>
</div>
</td>

<td nowrap>
<div class="col" title="[Long2] /surname Long/[long2] /dragon/CL:條|条[tiao2]/imperial/">
<div class="gr">long</div>
<div class="zi">龍
</div>
</div>
</td>

<td nowrap>
<div class="col" title="[rui4] /lucky/auspicious/propitious/rayl (acoustical unit)/">
<div class="gr">ruey</div>
<div class="zi">瑞
</div>
</div>
</td>

<td nowrap>
<div class="col" title="[Yun2] /surname Yun/abbr. for Yunnan Province 雲南省|云南省[Yun2 nan2 sheng3]/[yun2] /cloud/CL:朵[duo3]/">
<div class="gr">yun</div>
<div class="zi">雲
</div>
</div>
</td>

<td nowrap>
<div class="col" title="[Tai2 bei3] /Taibei or Taipei, capital of Taiwan/">
<div class="gr">tair</div>
<div class="zi">台
</div>
</div>
</td>

<td nowrap>
<div class="col" title="[Tai2 bei3] /Taibei or Taipei, capital of Taiwan/">
<div class="gr">beei</div>
<div class="zi">北
</div>
</div>
</td>

<td nowrap>
<div class="col" >
<div class="gr"></div>
<div class="zi">2
</div>
</div>
</td>

<td nowrap>
<div class="col" >
<div class="gr"></div>
<div...

CSS

table { table-layout: fixed; }
td { vertical-align: bottom; }
.col { width:40px; overflow: hidden; }
.gr { text-align: center; font-size: 12px; font-family: Arial Narrow, Arial, sans-serif; color: #009; }
.zi { text-align: center; font-size: 24px; }
.hl { background-color: #9cf; }
.attrib { font-size: 12px; font-family: Arial Narrow, Arial, sans-serif; color: #009; }
.pronlink { font-size: 12px; font-family: Arial Narrow, Arial, sans-serif; color: #009; }
.hidden { display: none !important; }

JavaScript

$('#togglePron').click(function() {
 $('.gr').toggleClass('hidden');
});