index.html

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8">
	<title>画面モック</title>
	<link rel="stylesheet" href="css/styles.css">
</head>
<body>
  <div class="pack">
    <table>
      <tbody>
        <tr>
          <th>見出し</th>
          <td>説明</td>
          <td class="btn">
            <input type="radio" id="radio_sel" class="radio_sels" onclick="btnClicked(this.parentNode)">
            <label for="radio_sel">選択</label>
          </td>
        </tr>
      </tbody>
    </table>
  </div>

  <div class="table_pack">
    <!-- <div class="table_pack_row"> -->
      <div class="head">
        見出し
      </div>
      <div class="body">
        <div class="body_row">
          <table class="body_row_table">
            <tbody>
              <tr>
                <td>説明</td>
                <td class="btn">
                  <input type="radio" id="radio_sel_1" class="radio_sels" onclick="btnClicked(this.parentNode)">
                  <label for="radio_sel_1">選択</label>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
        <div class="body_row">
          <table class="body_row_table">
            <tbody>
              <tr>
                <td>説明</td>
                <td class="btn">
                  <input type="radio" id="radio_sel_2" class="radio_sels" onclick="btnClicked(this.parentNode)">
                  <label for="radio_sel_2">選択</label>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    <!-- </div> -->
  </div>

	 <script src="js/main.js"></script>
</body>
</html>

styles.css

div {
  display: block;
}
.pack {
  border: 2px solid #32b7b2;
  margin-top: 20px;
}
table {
  width: 100%;
  border: none;
}
th {
  width: 30%;
  background: #32b7b2;
  color: #ffffff;
}
td {
  padding: 25px 20px;
}
.radio_sels{
  display: none;
}
.btn {
  width: 30%;
  background: #dbf5f0;
  color: #32b7b2;
  border-top: 2px solid #32b7b2;
  border-left: 2px solid #32b7b2;
  border-right: 2px solid #32b7b2;
  border-bottom: 4px solid #32b7b2;
  text-align: center;
}
.btn:hover {
  background: #32b7b2;
  color: #ffffff;
}
.btn_checked  {
  width: 30%;
  background: #32b7b2;
  color: #ffffff;
  border-top: 2px solid #dbf5f0;
  border-left: 2px solid #dbf5f0;
  border-right: 2px solid #dbf5f0;
  border-bottom: 4px solid #dbf5f0;
  text-align: center;
}
.table_pack {
  display: flex;
  border: 2px solid #32b7b2;
  margin-top: 20px;
  padding: 10px;
}
.head {
  width: 30%;
  border: 2px solid #32b7b2;
  float: left;
  margin: 0 5px 0 0;
  background: #32b7b2;
  color: #ffffff;
  text-align: center;
  vertical-align: middle;
  font-weight: bold;
}
.body {
  width: 70%;
  border: 2px solid #32b7b2;
  float: left;
}
.body_row {
//  border: 2px solid #32b7b2;
  padding: 10px;
  margin: 5px;
}
.body_row_table {
  height: auto;
}
.table_pack_row {
  float: none;
}

main.js

var btnClicked = function(obj){
  obj.className = "btn_checked";
}