JSFiddle - React, Tailwind, and code Playground

by mooju7463

HTML

https://jsfiddle.net/#save
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <title>第4課 ── 好用的表格</title>
  </head>

  <body>
    <h1>臺中市108年1月份十大易肇事路段(口)</h1>
    <table>
      <tr>
        <th >編號</th>
        <th>轄區分局</th>
        <th>路口名稱</th>
        <th>A1</th>
        <th>A2件數</th>
        <th>A2受傷</th>
        <th>A3</th>
        <th>肇事件數</th>
        <th>發生時間</th>
        <th>主要肇因</th>
      </tr>

      <tr>
        <td>1</td>
        <td>第六分局</td>
        <td>西屯區環中路市政路口</td>
        <td>0</td>
        <td>1</td>
        <td>1</td>
        <td>6</td>
        <td>7</td>
        <td>16-18</td>
        <td>變換車道或方向不當</td>
      </tr>



      <tr>
        <td>2</td>
        <td>第三分局</td>
        <td>南區國光路復興路</td>
        <td>0</td>
        <td>7</td>
        <td>11</td>
        <td>0</td>
        <td>7</td>
        <td>16-18</td>
        <td>違反特定標誌(線)禁制</td>
      </tr>



      <tr>
        <td>3</td>
        <td>第六分局</td>
        <td>西屯區環中路市政路口</td>
        <td>0</td>
        <td>1</td>
        <td>1</td>
        <td>6</td>
        <td>7</td>
        <td>16-18</td>
        <td>未保持行車安全距離</td>
      </tr>

      <tr>
        <td >4</td>
        <td>第五分局</td>
        <td>北屯區松竹路環中東路</td>
        <td>0</td>
        <td>4</td>
        <td>5</td>
        <td>2</td>
        <td>6</td>
        <td>8-10</td>
        <td>違反號誌管制或指揮</td>
      </tr>

      <tr>
        <td>5</td>
        <td>第三分局</td>
        <td>南區忠明南路國光路</td>
        <td>0</td>
        <td>2</td>
        <td>2</td>
        <td>3</td>
        <td>5</td>
        <td>16-18</td>
        <td>違反號誌管制或指揮</td>
      </tr>

      <tr>
        <td >6</td>
        <td>第三分局</td>
        <td>南區復興路五權南路</td>
        <td>0</td>
        <td>4</td>
        <td>5</td>
        <td>1</td>
        <td>5</td>
        <td>14-16</td>
        <td>未依規定讓車</td>
      </tr>

      <tr>
        <td >7</td>
        <td>第四分局</td>
        <td>南屯區文心南路永春東路</td>
        <td>0</td>
        <td>4</td>
        <td>6</td>
       ...

CSS

h1{ 
  font-size:48px;
  text-align:center;
  }

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

th,td {
   text-align: center;
  padding:20px;
  border: 1px solid black;
  font-size:26px;
  font-weight:bold;
}
th{
  background-color:rgb(0, 165, 244, 0.2);
  
}

td:hover{
  background-color:#b4b4b4;
  color:white ;
}

th:hover{
  background-color:#b4b4b4;
  color:white ;
}