JSFiddle - React, Tailwind, and code Playground

by hannahtest190619

HTML

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
  <title>CH4.好用的表格</title>
</head>
<body>
 <table>
 <caption><strong>2017-各類初任人員月平均經常性薪資</strong></caption>
<tr>
<th>編號</th>
<th>行業別</th>
<th>經常性薪資薪資</th>
<th>專業人員薪資</th>
<th>技術員薪資</th>
</tr>
<tr>
  <td classs="number">1</td>
  <td>製造業</td>
   <td>26,782</td>
    <td>33,753</td>
     <td>27,905</td>
</tr>
<tr>
  <td classs="number">2</td>
  <td>紡織業</td>
   <td>25,877</td>
    <td>32,138</td>
     <td>27,437</td>
</tr>
<tr>
  <td classs="number">3</td>
  <td>電子零組件製造業</td>
   <td>27,722</td>
    <td>35,928</td>
     <td>28,187</td>
</tr>
<tr>
  <td classs="number">4</td>
  <td>營造業</td>
   <td>27,486</td>
    <td>33,780</td>
     <td>29,470</td>
</tr>
<tr>
  <td classs="number">5</td>
  <td>銀行業</td>
   <td>34,471</td>
    <td>39,089</td>
     <td>35,461</td>
</tr>
<tr>
  <td classs="number">6</td>
  <td>不動產業</td>
   <td>27,761</td>
    <td>34,237</td>
     <td>28,713</td>
</tr>
<tr>
  <td classs="number">7</td>
  <td>法律服務業</td>
   <td>34,607</td>
    <td>43,000</td>
     <td>31,038</td>
</tr>
<tr>
  <td classs="number">8</td>
  <td>旅行及相關代訂服務業</td>
   <td>26,807</td>
    <td>32,438</td>
     <td>29,727</td>
</tr>
<tr>
  <td classs="number">9</td>
  <td>教育服務業</td>
   <td>25,383</td>
    <td>28,189</td>
     <td>27,778</td>
</tr>
<tr>
  <td classs="number">10</td>
  <td>批發業</td>
   <td>27,340</td>
    <td>34,938</td>
     <td>28,679</td>
</tr>
</table>
</body>
</html>

CSS

body {
  font-family: "Times New Roman", Times, serif;
}
table, th, td {
  border-collapse: collapse;
  text-align: center;
  border: 2px solid #908b8b;
}
table {
  min-width: 80%;
  margin: 0 auto;
  margin-top: 30px;
 

}
caption {
  font-size: 22px;
  font-weight: 900;
  color: black;
}
th, td {
  padding: 18px;
 
}
tr:nth-child(even) {
  background-color: #c6d5de;
}

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