JSFiddle - React, Tailwind, and code Playground

by ccyingo

HTML

<!DOCTYPE>
<html>

  <head>
    <title>北市高校總表</title>
  </head>

  <body>

    <h1>北市高校總表</h1>

    <table>
      <tr>
        <th>學校名稱</th>
        <th>公私立</th>
        <th>縣市名稱</th>
        <th>電話</th>
      </tr>
      <tr>
        <td>國立華僑高級中等學校</td>
        <td>公立</td>
        <td>[01]新北市</td>
        <td>(02)29684131</td>
      </tr>
      <tr>
        <td>私立淡江高中</td>
        <td>私立</td>
        <td>[01]新北市</td>
        <td>(02)26203850</td>
      </tr>
      <tr>
        <td>私立康橋高中</td>
        <td>私立</td>
        <td>[01]新北市</td>
        <td>(02)22166000</td>
      </tr>
      <tr>
        <td>私立金陵女中</td>
        <td>私立</td>
        <td>[01]新北市</td>
        <td>(02)29956776</td>
      </tr>
      <tr>
        <td>新北市裕德高級中等學校</td>
        <td>公立</td>
        <td>[01]新北市</td>
        <td>(02)29684131</td>
      </tr>
      <tr>
        <td>國立華僑高級中等學校</td>
        <td>私立</td>
        <td>[01]新北市</td>
        <td>(02)82617889</td>
      </tr>
      <tr>
        <td>財團法人南山高中</td>
        <td>私立</td>
        <td>[01]新北市</td>
        <td>(02)22453000</td>
      </tr>
      <tr>
        <td>財團法人恆毅高中</td>
        <td>私立</td>
        <td>[01]新北市</td>
        <td>(02)29923619</td>
      </tr>
      <tr>
        <td>私立聖心女中</td>
        <td>私立</td>
        <td>[01]新北市</td>
        <td>(02)26182287</td>
      </tr>
      <tr>
        <td>私立崇義高中</td>
        <td>私立</td>
        <td>[01]新北市</td>
        <td>(02)86482078</td>
      </tr>
    </table>
  </body>

</html>

CSS

h1 {
  text-align: center;
}

table {
  margin: auto;
  width: 80%;
  border-collapse: collapse;
  
  font-family: “Arial”, ”Microsoft YaHei”, ”黑體”, ”宋體”, sans-serif;
}

th{
  padding: 10px 0;
  border: 1px solid white;
  border-bottom: 3px solid #000;
  background-color: #8BD2EE;
}


td{
  text-align: center;
  padding: 10px;
  border: 1px solid white;
}

tr:nth-child(odd){
  background: #FEE9E9;
}

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

tr:nth-child(odd) td:hover{
  background: #FFA4A4;
  color: #fff;
}

tr:nth-child(even) td:hover{
  background: #B3E9FF;
  color: #fff;
}