JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>第4課 ── 好用的表格</title>
</head>
<body>
  <h1>臺北市環境教育場所</h1>
  
  <table>
    <tr>
      <th>編號</th>
      <th>設施場所名稱</th>
      <th>設施場所地址或座落</th>
      <th>聯絡電話</th>
    </tr>
    <tr>
      <td class="number">1</td>
      <td>內雙溪自然中心</td>
      <td>臺北市士林區至善路３段150巷27號</td>
      <td>(02)27593001 #3314</td>
    </tr>
    <tr>
      <td class="number">2</td>
      <td>松山奉天宮環境教育中心</td>
      <td>臺北市信義區福德街221巷12號</td>
      <td>(02)27279765 #533</td>
    </tr>
    <tr>
      <td class="number">3</td>
      <td>中正紀念堂</td>
      <td>臺北市中正區中山南路21號</td>
      <td>(02)23431100 #1024</td>
    </tr>
    <tr>
      <td class="number">4</td>
      <td>芝山文化生態綠園</td>
      <td>臺北市士林區雨聲街120號</td>
      <td>(02)88666258 #11</td>
    </tr>
    <tr>
      <td class="number">5</td>
      <td>迪化污水處理廠</td>
      <td>臺北市大同區酒泉街235號</td>
      <td>(02)25973183 #872</td>
    </tr>
    <tr>
      <td class="number">6</td>
      <td>國立臺灣科學教育館</td>
      <td>臺北市士林區士商路189號</td>
      <td>(02)66101234 #5629</td>
    </tr>
    <tr>
      <td class="number">7</td>
      <td>國立臺灣博物館</td>
      <td>臺北市襄陽路2號、25號、南昌路1段一號</td>
      <td>(02)23822699 #420</td>
    </tr>
    <tr>
      <td class="number">8</td>
      <td>貴子坑水土保持教學園區</td>
      <td>臺北市信義區松德路300號3樓</td>
      <td>(02)27593001 #3332</td>
    </tr>
    <tr>
      <td class="number">9</td>
      <td>陽明山國家公園</td>
      <td>臺北市北投區陽明山國家公園園區</td>
      <td>(02)28613601 #809</td>
    </tr>
    <tr>
      <td class="number">10</td>
      <td>臺大農場農藝分場</td>
      <td>臺北市大安區基隆路四段42巷5號</td>
      <td>(02)33662560</td>
    </tr>
  </table>
		 
</body>
</html>

CSS

body {
  font-family: Courier, "Helvetica Neue";
}

h1 {
  text-align: center;
}

table {
  width: 80%;
  min-width: 640px;
  margin: auto;
  border-spacing: 0px;
  border-collapse: collapse;
}

th, td {
  border: 1px solid #ccc;
  padding: 10px;
}

th {
  border-bottom: 2px solid #777;
}

.number {
  text-align: center;
  text-weight: bold;
}

.number:hover,
td:hover {
  background-color: #2f6db6;
  color: #fff;
}

tr:nth-child(even) {
  background: #eaf0f8;
}