JSFiddle - React, Tailwind, and code Playground

by jiaxin520

HTML

<!DOCTYPE html>
<html>
<body class="k6">
<p class="k1">
首頁/資料集/新竹市生育津貼支用明細表
</p>
<div class="k2">
<h1>
新竹市生育津貼支用明細表
</h1>
<p>
新竹市各區每月各胎次生育津貼請領金額及請領人數
</p>
<p>
評分此資料集：
</p>
<p>
平均 0.00 (0 人次投票)
</p>
</div>
<div class="k3">
瀏覽次數： 1449
下載次數： 254
意見數： 0
<div class="k4">
<button>DCAT詞彙</button>
<button>列印</button>
</div>
</div>
<div class="k5">
<table cellpadding="10px" border="1px">
<tr align="left"> 
<th bgcolor="lightgrey">主要欄位說明 <br />
<span>*粗體欄位為資料標準欄位</span></th>
<td>年月、東區新生兒人數、東區請領新臺幣元、北區新生兒人數、北區請領新臺幣元、香山新生兒人數、香山請領新臺幣元、第1胎、第2胎、第3胎、第4胎、第5胎、第6胎、第7胎、雙胞胎、第8胎、第9胎、第10胎、三胞胎、總人數、請領新臺幣元
</td>
</tr>
<tr align="left"> 
<th bgcolor="lightgrey">資料資源下載網址	
</th>
<td><a href="https://odws.hccg.gov.tw/001/Upload/25/opendataback/9059/299/10f36e66-c0ed-4746-83a8-8ee831b2b9f5.xlsx"><button>
XLSX
</button></a>
<a href="https://odws.hccg.gov.tw/001/Upload/25/opendataback/9059/299/10f36e66-c0ed-4746-83a8-8ee831b2b9f5.xlsx">檢視資料</a>
新竹市各區每月各胎次生育津貼請領金額及請領人數 <br />
<a href="https://odws.hccg.gov.tw/001/Upload/25/opendataback/9059/299/10f36e66-c0ed-4746-83a8-8ee831b2b9f5.xlsx"><button>
CSV
</button></a>
<a href="https://odws.hccg.gov.tw/001/Upload/25/opendataback/9059/299/10f36e66-c0ed-4746-83a8-8ee831b2b9f5.xlsx">檢視資料</a>
新竹市各區每月各胎次生育津貼請領金額及請領人數 <br />
<a href="https://odws.hccg.gov.tw/001/Upload/25/opendataback/9059/299/10f36e66-c0ed-4746-83a8-8ee831b2b9f5.xlsx"><button>
XML
</button></a>
<a href="https://odws.hccg.gov.tw/001/Upload/25/opendataback/9059/299/10f36e66-c0ed-4746-83a8-8ee831b2b9f5.xlsx">檢視資料</a>
新竹市各區每月各胎次生育津貼請領金額及請領人數 <br /><a href="https://odws.hccg.gov.tw/001/Upload/25/opendataback/9059/299/10f36e66-c0ed-4746-83a8-8ee831b2b9f5.xlsx"><button>
JSON
</button></a>
<a href="https://odws.hccg.gov.tw/001/Upload/25/opendataback/9059/299/10f36e66-c0ed-4746-83a8-8ee831b2b9f5.xlsx">檢視資料</a>
新竹市各區每月各胎次生育津貼請領金額及請領人數 <br />
</td>


</tr>
<tr align="left"> 
<th bgcolor="lightgrey">提供機關</th>
<td><a href="https://data.gov.tw/datasets/search?qs=36785">民政處</a></td>
</tr>
<tr...

CSS

.k1{ position:absolute;
margin:0; 
}
.k2{ background-color:lightgrey;
width:1000px;
text-align:center;
padding-top:40px;
padding-bottom:10px;
}
.k3{padding-top:20px;
  }
.k4{right:-305px;
top:265px;
  position:absolute;
}
.k5{width:1000px;
}
.k6{
  font-size:1rem;
  font-family:"Noto Sans TC",system-ui,sans-serif;
}
a:hover,a:link,a:visited,a:active{
color:blue;  
text-decoration:none;
padding-left:5px;
}
th{ 
  width:160px;
 }
table{ border: 1px solid lightgrey;
border-collapse:separate;
border-spacing:0;
}
button{color:blue;
background-color:lightblue;
border:1px solid;
}