JSFiddle - React, Tailwind, and code Playground

HTML

<input type="checkbox"
  onclick="document.getElementById('addr1').style.display = this.checked ? 'none' : 'block';">Bを非表示（これをクリックしてBの列が全て消えるようにしたいです。）
  
<table class="test" style="width: 100%;" cellspacing="0" cellpadding="0">
  <tbody>
   <tr>
    <th>A</th>
    <th style="padding: 10px;" colspan="2" id="addr1" style="display:block;">B</th>
    <th>C</th>    
   </tr>
   <tr>
    <td rowspan="2" class="waku">ぽぽぽ</td>
    <td>ねこ</td>
    <td>いぬ</td>
    <td>ヤモリ</td>    
   </tr>
   <tr>
    <td>おうち</td>
    <td>おにわ</td>
    <td>おそと</td>
   </tr>
  </tbody>
</table>

CSS

.test th {
    border: 1px solid #FFF;
    padding: 7px;
    background: #000;
    color: #FFF;
    text-align: center;
    vertical-align: middle;
}
.test td {
    border: 1px solid black;
    padding: 10px;
    vertical-align: middle;
}
.test td {
    border-top: none !important;
    border-right: 1px solid #000;
}

.waku {
  position: relative;
}
.waku a::after {
  position: absolute;
  width: 100%;
  height: 100%;
  content: "";
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}