JSFiddle - React, Tailwind, and code Playground

HTML

<table>
  <colgroup span="2"></colgroup>
  <col>
  <colgroup span="4"></colgroup>
  <thead>
    <tr>
      <td class="_none"></td>
      <td class="_none"></td>
      <th class="teamtype -home _arena" scope="rowgroup">
        <div>
          ホームチーム
        </div>
      </th>
      <td class="_empty"></td>
      <th class="team -a _arena2" scope="col">A</th>
      <th class="team -b _arena2" scope="col">B</th>
      <th class="team -c _arena2" scope="col">C</th>
      <th class="team -d _arena2" scope="col">D</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th rowspan="4" class="teamtype -away" scope="colgroup">アウェイチーム</th>
      <th class="team -a _awayteam" scope="row">A</th>
      <td class="_none"></td>
      <td class="_none"></td>
      <td></td>
      <td>2 - 1</td>
      <td>1 - 1</td>
      <td>0 - 4</td>
    </tr>
    <tr>
      <th class="team -b _awayteam" scope="row">B</th>
      <td class="_none"></td>
      <td class="_none"></td>
      <td>0 - 2</td>
      <td></td>
      <td>1 - 3</td>
      <td>0 - 0</td>
    </tr>
    <tr>
      <th class="team -c _awayteam" scope="row">C</th>
      <td class="_none"></td>
      <td class="_none"></td>
      <td>1 - 2</td>
      <td>3 - 1</td>
      <td></td>
      <td>4 - 2</td>
    </tr>
    <tr>
      <th class="team -d _awayteam" scope="row">D</th>
      <td class="_none"></td>
      <td class="_none"></td>
      <td>2 - 2</td>
      <td>5 - 3</td>
      <td>1 - 0</td>
      <td></td>
    </tr>
  </tbody>
</table>

CSS

body {
  max-width: 40em;
  margin: 1em auto;
}

table {
  table-layout: fixed;
  width: 100%;
  border-collapse: collapse;
}

th,
td {
  padding: 0.5em;
  border: 1px solid #777;
}

td {
  padding: 1em 0.5em;
  text-align: center;
}

.team {
  color: white;
}

.team.-a {
  background-color: midnightblue;
  border-color: midnightblue;
}

.team.-b {
  background-color: crimson;
  border-color: crimson;
}

.team.-c {
  background-color: darkorange;
  border-color: darkorange;
}

.team.-d {
  background-color: seagreen;
  border-color: seagreen;
}

.teamtype.-home {
  width: 4em;
}

._none {
}

._empty {}

._arena {
  position: relative;
}

._arena2 {
  position: relative;
  z-index: 2;
}

._arena div {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 200%;
  max-width: 200%;
  height: 100%;
  white-space: nowrap;
  background-color: #fff;
  
  display: flex;
  align-items: center;
  padding-left: 1em;
}