JSFiddle - React, Tailwind, and code Playground

by oti ext

HTML

<table>
  <thead>
    <tr>
      <th colspan="2" class="teamtype -home" scope="rowgroup">ホームチーム</th>
      <th class="team -a" scope="col">A</th>
      <th class="team -b" scope="col">B</th>
      <th class="team -c" scope="col">C</th>
      <th class="team -d" scope="col">D</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th rowspan="4" class="teamtype -away" scope="colgroup">アウェイチーム</th>
      <th class="team -a" scope="row">A</th>
      <td></td>
      <td>2 - 1</td>
      <td>1 - 1</td>
      <td>0 - 4</td>
    </tr>
    <tr>
      <th class="team -b" scope="row">B</th>
      <td>0 - 2</td>
      <td></td>
      <td>1 - 3</td>
      <td>0 - 0</td>
    </tr>
    <tr>
      <th class="team -c" scope="row">C</th>
      <td>1 - 2</td>
      <td>3 - 1</td>
      <td></td>
      <td>4 - 2</td>
    </tr>
    <tr>
      <th class="team -d" scope="row">D</th>
      <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;
}