【HTML/CSS】シンプルなタブをJS無し（CSSのみ）で作る

<div class="tabs">
  <input id="tab_1" type="radio" name="tab_item" checked>
  <label class="tab_item" for="tab_1">Tab1</label>
  <input id="tab_2" type="radio" name="tab_item">
  <label class="tab_item" for="tab_2">Tab2</label>
  <input id="tab_3" type="radio" name="tab_item">
  <label class="tab_item" for="tab_3">Tab3</label>
  <div class="tab_content" id="tab_item1">
    <table>
      <tr>
        <th>Tab Content1</th>
        <td>
          Tab Content
        </td>
      </tr>
    </table>
  </div>
    <div class="tab_content" id="tab_item2">
    <table>
      <tr>
        <th>Tab Content2</th>
        <td>
          Tab Content
        </td>
      </tr>
    </table>
  </div>
    <div class="tab_content" id="tab_item3">
    <table>
      <tr>
        <th>Tab Content3</th>
        <td>
          Tab Content
        </td>
      </tr>
    </table>
  </div>
</div>

/*タブ切り替え全体のスタイル*/
.tabs {
  margin-top: 20px;
  width: 100%;
}
/*タブのスタイル*/
.tab_item {
  cursor: pointer;
  width: calc(100% / 3);
  /*タブが増減する場合3の部分を適宜変えてください*/
  height: 50px;
  background: #f1f1f1;
  color: #00b7c3;
  line-height: 50px;
  font-size: 16px;
  text-align: center;
  display: block;
  float: left;
  border-radius: 10px 10px 0 0;
  font-weight: bold;
  transition: all 0.2s ease;
  border-top: #f1f1f1 solid 1px;
  border-left: #f1f1f1 solid 1px;
  border-right: #f1f1f1 solid 1px;
  box-sizing: border-box;
  &:hover {
    opacity: 0.75;
  }
}

/*ラジオボタンを全て消す*/
input[name="tab_item"] {
  display: none;
}

/*タブ切り替えの中身のスタイル*/
.tab_content {
  display: none;
  clear: both;
  overflow: hidden;
  padding: 20px;
}

/*選択されているタブのコンテンツのみを表示*/
#tab_1:checked ~ #tab_item1,
#tab_2:checked ~ #tab_item2,
#tab_3:checked ~ #tab_item3,
#tab_4:checked ~ #tab_item4,
#tab_5:checked ~ #tab_item5,
#tab_6:checked ~ #tab_item6 {
  display: block;
}

/*選択されているタブのスタイルを変える*/
.tabs input:checked + .tab_item {
  background: #fff;
  color: #00b7c3;
}

/*以下、タブ内に表示するtableのスタイル*/
.tab_content table {
  width:100%;
  text-align: left;
}
.tab_content th {
  min-width: 100px;
  width: 20%;
}
.tab_content tr {
  border-bottom: #f1f1f1 solid 1px;
}