JSFiddle - React, Tailwind, and code Playground

by tsaii

HTML

<h1>教育部國民及學前教育署112年度對民間團體補(捐)助經費彙總表</h1>
<table style="width:100%">
  <tr>
    <th>主要欄位說明<br>
*粗體欄位為資料標準欄位</th>
<td>項次、補(捐)助機關、受補(捐)助對象所歸屬之直轄市或縣（市）、受補(捐)助對象、補(捐)助事項或用途、核准日期、補(捐)助金額(含累積金額)、備註</td>
  </tr>
   <tr>
    <th>資料資源下載網址</th>
    <td><button>svc</button>教育部國民及學前教育署112年度截至第1季止對民間團體補(捐)助經費彙總表</td>
  </tr>
  <tr>
    <th>提供機關</th>
    <td><a href="https://data.gov.tw/datasets/search?qs=731">教育部國民及學前教育署</a></td>
  </tr>
  <tr>
    <th>提供機關聯絡人姓名</th>
<td>白春惠 (0437061639)</td>
  </tr>
  <tr>
    <th>更新頻率</th>
<td>不定期更新</td>
  </tr>
  <tr>
    <th>授權方式</th>
<td>政府資料開放授權條款-第1版</td>
  </tr>
  <tr>
    <th>計費方式</th>
<td>免費</td>
  </tr>
  <tr>
    <th>上架日期</th>
<td>2023-04-14</td>
<tr>
    <th>資料集類型</th>
<td>原始資料</td>
  </tr>
  <tr>
  <tr>
    <th>詮釋資料更新時間</th>
<td>2023-04-19 13:41</td>
  </tr>
  <tr>
  <tr>
    <th>服務分類</th>
<td><a href="https://data.gov.tw/datasets/search?ct=280">求學及進修</a></td>
  </tr>
  <tr>
  <tr>
    <th>資料集分類</th>
<td>開放資料</td>
  </tr>
  <tr>
  <tr>
    <th>關鍵字</th>
<td></td>
  </tr>
 <tr>
    <th>相關網址</th>
<td></td>
  </tr>
  <tr>
    <th>備註</th>
<td></td>
  </tr>
</table>

CSS

h1{
  text-align:center;
}
table,
tr,
th,
td {
  border: 1px solid lightgray;
  border-collapse: collapse;
}

th {
  text-align: left;
  padding: 8px;
  width: 30%;
  background-color: DarkGray;
}

td {
  padding: 8px;
}

a {
  color: SteelBlue;
  text-decoration: none;
}
button:hover{
  background-color:	Lavender;
}

button {
  color:SteelBlue;
  font-size: 8px lightgray 30%;
  background-color: PowderBlue;
  border-radius: 15%;
  padding: 5px;
  margin: 0 3px;
  border-color: lightblue;
}