JSFiddle - React, Tailwind, and code Playground

by etai200

HTML

<html>
<head>
<style>
</style>
</head>
<div class="tebleradius">
<table style="width:100%" cellpadding="3" cellspacing="1" bgcolor="Azure">
<!--cellpadding 儲存格邊距  cellspacing 儲存格間距! bgcolor 表格顏色-->
<caption frame="box">抗蛇毒血清儲備點查詢</caption><!-- 表格標題!-->
<tr>
  <th style="width:20%" colspan="2">區域別</th><!--分割儲存格 垂直時使用rowspan !-->
  <th style="width:30%">抗蛇毒血清種類</th>
  <th style="width:60%">醫療院所名稱</th>
  </tr>
  <tr class="odd">
    <td align="center">台北區</td>
    <td align="center">台北市</td>
    <td>抗百步蛇毒血清</td>
    <td><a href="https://www.tsgh.ndmctsgh.edu.tw/">三軍總醫院附設民眾診療服務處</a></td>
  </tr>
  <tr class="even">
    <td align="center">台北區</td>
    <td align="center">台北市</td>
    <td>抗百步蛇毒血清</td>
    <td><a href="https://www.mmh.org.tw/home.php">台灣基督長老教會馬偕醫療財團法人馬偕紀念醫院</a></td>
  </tr>
  <tr class="odd">
    <td align="center">台北區</td>
    <td align="center">台北市</td>
    <td>抗百步蛇毒血清</td>
    <td><a href="https://www.chgh.org.tw/">振興醫療財團法人振興醫院</a></td>
  </tr>
  <tr class="even">
    <td align="center">台北區</td>
    <td align="center">台北市</td>
    <td>抗百步蛇毒血清</td>
    <td><a href="https://www.ntuh.gov.tw/">國立臺灣大學醫學院附設醫院</a></td>
  </tr>
  <tr class="odd">
    <td align="center">台北區</td>
    <td align="center">台北市</td>
    <td>抗百步蛇毒血清</td>
    <td><a href="https://www.skh.org.tw/skh/index.html">新光醫療財團法人新光吳火獅紀念醫院</a></td>
  </tr>
  <tr class="even">
    <td align="center">台北區</td>
    <td align="center">台北市</td>
    <td>抗百步蛇毒血清</td>
    <td><a href="https://www.vghtpe.gov.tw/Index.action">臺北榮民總醫院</a></td>
  </tr>
  <tr class="odd">
    <td align="center">台北區</td>
    <td align="center">台北市</td>
    <td>抗雨傘節及飯匙倩蛇毒血清</td>
    <td><a href="https://www.tsgh.ndmctsgh.edu.tw/">三軍總醫院附設民眾診療服務處</a></td>
  </tr>
  <tr class="even">
    <td align="center">台北區</td>
    <td align="center">台北市</td>
    <td>抗雨傘節及飯匙倩蛇毒血清</td>
    <td><a href="https://www.ntuh.gov.tw/ntuh/Index.action">國立臺灣大學醫學院附設醫院</a></td>
  </tr>
  <tr class="odd">
    <td align="center">台北區</td>
    <td...

CSS

table, th, td ,caption{
  border: 1px solid AliceBlue;
}
.odd td{
  background-color: white;
}
.even td{
  background-color: Gainsboro;
}
table tr:not(:first-child):hover td{ /* 排除第一行 */
  background-color: gray;
  color: white;
}
th{
 background-color: CornflowerBlue;
 color: white;
 height: 30px;
 white-space: nowrap; /* 縮放不換行 */
}
caption{ /* 表格標題 */
  background-color: RoyalBlue;
  color: white;
  font-size: 35px;
  
}
.tebleradius{
     border: 1px solid #0066cc;
     padding: 5px;
     -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
     border-radius: 5px;
}