JSFiddle - React, Tailwind, and code Playground

by 973224

HTML

<html>

<h2>臺北市河濱公園販賣機</h2>

<div class='background'>
  <h4>
  詮釋資料
  </h4>
  
  <table border='0' cellpadding="10">
  <tr>
  <th align='right'>
    主題分類
  </th>
  <td class='top'>
    水利
  </td>
  </tr>
  <tr>
    <th align='right'>國家會主題分類</th>
    <td>
      其他
    </td>
  </tr>
  <tr>
    <th align='right'>政府網站分類</th>
    <td>休閒旅遊</td>
  </tr>
  <tr>
    <th align='right'>國發會資料集類型</th>
    <td>原始資料</td>
  </tr>
  <tr>
    <th align='right'>主要欄位說明</th>
    <td>編號、河濱公園、廠商、緯度_TWD97、經度_TWD97、緯度WGS84、精度WGS84</td>
  </tr>
  <tr>
    <th align='right'>資料集敘述</th>
    <td>河濱公園自動販賣機設置位置，TWD97座標，WGS84座標</td>
  </tr>
  <tr>
    <th align='right'>資料集提供機關</th>
    <td>工務局水利處</td>
  </tr>
  <tr>
    <th align='right'>資料授權</th>
    <td>公開</td>
  </tr>
  <tr>
    <th align='right'>更新頻率</th>
    <td>每年</td>
  </tr>
  <tr>
    <th align='right'>檢測頻率</th>
    <td>每年</td>
  </tr>
  <tr>
    <th align='right'>詮釋資料更新時間</th>
    <td>2023-03-13 15:55:57</td>
  </tr>
  </table>
  
  <button>
  顯示較多
  </button>
  
  
  
  
</div>
</html>

CSS

html{
  background:#F4F4F5;
}

h2{
  background:#F4F4F5;
  padding-bottom:40px;
}

.background{
  background:white;
  width:100%;
  height:1000px;
}

h4{
  padding-left:10px;
  position:relative;
  top:-10px;
}

button{
  background:#32ACBC;
  position:relative;
  top:10px;
  margin:auto;
  display:flex;
  justify-content:center;
  align-content:center;
  flex-wrap:wrap;
  width:80px;
  height:30px;
  color:white;
  border:none;
  border-radius:3px;
}

th{
 background:#32ACBC;
 color:white;
 border-bottom:0px solid white;
}

td{
  background:white;
  border-bottom:1px solid lightgray;
}
.top{
  border-top:1px solid lightgray;
}