JSFiddle - React, Tailwind, and code Playground

by jiaxin520

HTML

<!DOCTYPE html>
<html>
<body>
<div class="k2">
<a href="https://jsfiddle.net/jiaxin520/jxutaes3/44/">新竹市生育津貼支用明細表</a>
</div>
<div class="k1">
<table>
<tr>
<th>年月</th> 
<th>東區新生兒人數</th> 
<th>東區請領新台幣元</th> 
<th>北區新生兒人數</th> 
<th>北區請領新台幣元</th> 
<th>香山新生兒人數</th> 
<th>香山請領新台幣元</th> 
<th>第1胎</th> 
<th>第2胎</th> 
<th>第3胎</th> 
</tr>
<tr>
<td>10701</td> 
<td>188</td> 
<td>3700000</td> 
<td>123</td> 
<td>2340000</td> 
<td>63</td> 
<td>1190000</td> 
<td>171</td> 
<td>149</td> 
<td>36</td> 
</tr>
<tr>
<td>10702</td> 
<td>133</td> 
<td>2515000</td> 
<td>82</td> 
<td>1610000</td> 
<td>61</td> 
<td>1230000</td> 
<td>122</td> 
<td>111</td> 
<td>30</td> 
</tr>
<tr>
<td>10703</td> 
<td>191</td> 
<td>3645000</td> 
<td>109</td> 
<td>2040000</td> 
<td>75</td> 
<td>1455000</td> 
<td>182</td> 
<td>133</td> 
<td>42</td> 
</tr>
<tr>
<td>10704</td> 
<td>126</td> 
<td>2310000</td> 
<td>90</td> 
<td>1740000</td> 
<td>72</td> 
<td>1300000</td> 
<td>157</td> 
<td>99</td> 
<td>18</td> 
</tr>

</table>
</div>
</body>
</html>

CSS

.k1{ width:auto;
  border-radius:10px 10px 10px 10px;
box-shadow:0 0 5px 0 grey;
}
.k2,a:link{text-align:center;
  font-size:25px;
  text-decoration:none;
 
  padding-bottom:20px;
}
table{width:100%;
  border-collapse:separate;
  border-spacing:0;
  font-family:"Times New Roman",serif;
 
}
th{ background-color:lightgrey;
  width:25px;
  border-left:dotted 1px;
}
td{background-color:#f3f3f3;
  width:25px;
  height:50px;
  text-align:center;
  border-top:dotted 1px;
  border-left: dotted 1px;
}
tr:hover td{background-color:yellow;
  transition:all 0.3s ease;
}
tr:nth-of-type(even) td{
 background-color:rgba(160,10,50,0.3) 
}