JSFiddle - React, Tailwind, and code Playground

by elmon

HTML

<table class="styled-table">
  <caption class="cap-header">「臺北最High新年城 跨年晚會」活動預算及參與人數</caption>
  <tr>
    <th>主要欄位說明</th>
    <td>年度、活動內容、活動預算、活動參與人數、轉播觀看人次</td>
  </tr>
  <tr>
    <th>資料資源下載網址</th>
    <td><button>
    <span>檢視資料</span>
    </button></td>
  </tr>
  <tr>
    <th>提供機關</th>
    <td><a href="https://data.gov.tw/datasets/search?qs=23333" class="link"><span>台北市政府觀光傳播局</span></a>
    </td>
  </tr>
  <tr>
    <th>提供機關聯絡人姓名</th>
    <td>詹欣儒 (02-27208889#20231)</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-03-06</td>
  </tr>
  <tr>
    <th>資料集類型</th>
    <td>系統介接程式</td>
  </tr>
  <tr>
    <th>詮釋資料更新時間</th>
    <td>2023-03-06 21:17</td>
  </tr>
  <tr>
    <th>主題分類</th>
    <td>政府統計</td>
  </tr>
  <tr>
    <th>服務分類</th>
    <td><a href="https://data.gov.tw/datasets/search?ct=253" class="link"><span>休閒旅遊</span></a></td>
  </tr>
  <tr>
    <th>資料集分類</th>
    <td>開放集資料</td>
  </tr>
  <tr>
    <th>關鍵字</th>
    <td><button>
    <span>跨年</span>
    </button><button>
    <span>預算</span>
    </button><button>
    <span>效益</span>
    </button><button>
    <span>政府統計</span>
    </button></td>
  </tr>
  <tr>
    <th>相關網址</th>
  </tr>
  <tr>
    <th>備註</th>
  </tr>
</table>

CSS

.cap-header{
  text-align: left;
  padding: 5px;
  color: black;
  font-weight: 700px;
  font-size: 24px;
  border-left: 5px solid #003060;
}
.styled-table{
  border-collapse: collapse;
}

.styled-table tr{
  border: 1px solid lightgrey;
}

.styled-table th{
  text-align: left;
  background: #E9EDF2;
  padding: 10px;
  font-size: 16px;
}

.styled-table td{
  padding: 10px;
  width: 862px;
  color: #303133;
}

a .link{
  color: #0079B7;
}