JSFiddle - React, Tailwind, and code Playground

by tony05060165

HTML

<div class="title">
  <div class="title-word">111年度就業與僱用意向調查案</div>
  <div class="title-word2">委託報告</div>
</div>

<div style="font-size:13px">詮釋資料</div>

<table class="table">
  <tr>
    <th>計畫摘要</th>
    <td>本專案共包含臺北市大學校院應屆畢業生就業意向調查、臺北市中高齡者及高齡者就業情形及就業意向調查與臺北市各行業僱用新進人員及未來僱用意向調查三項調查。</td>
  </tr>
  <tr>
    <th>年度</th>
    <td>111</td>
  </tr>
  <tr>
    <th>研究單位</th>
    <td>艾普羅行銷市場研究股份有限公司</td>
  </tr>
  <tr>
    <th>研究主持人</th>
    <td>游彩玲</td>
  </tr>
  <tr>
    <th>研究起訖</th>
    <td>2022/3/1 至 2022/11/30</td>
  </tr>
</table>
<div class="table-bottom">
  顯示較多
</div>

CSS

.title{
  display:flex;
  justify-content:flex-start;
  text-align:center;
  margin-bottom:2px
  }
.title-word{
  flex:none;
  width:35%;
  font-weight:bold;
  margin-right:8px;
  }
.title-word2{
  flex:none;
  width:50px;
  font-size:10px;
  background-color:#00AEAE;
  border:1px solid #00AEAE;
  border-radius:5px;
  color:white;
  padding:2px;
  }
.table{
  border:1px solid #E0E0E0;
  font-size:12px;
  margin-bottom:2px;
  border-collapse:collapse;
}
th{
  background-color:#00CACA;
  color:white;
  width:100px;
  text-align:right;
  padding:2px;
  border:1px solid #E0E0E0
}
.table-bottom{
  background-color:#00CACA;
  color:white;
  font-size:14px;
  padding:2px;
  width:80px;
  text-align:center;
  margin:0 auto;
  border-radius:5px;
  }
  td{
    border:1px solid #E0E0E0
  }