臺北市立美術館2019典藏目錄-自製 CSS樣式

自製 CSS樣式

by applelily

HTML

<html>
<htad>
  <title>臺北市立美術館2019典藏目錄</title>
</htad>
<body>
<h3 style="margin-bottom:30px">
臺北市立美術館2019典藏目錄
</h3>
<p>
更新時間:	2023-07-07 17:53:39
</p>
<table style="width:100%">
  <tr>
    <th>_id</th>
    <th>分類號</th>
    <th>作者</th>
    <th>品名</th>
    <th>創作年代</th>
    <th>媒材技術</th>
    <th>尺寸</th>
    <th>網址</th>
    <th>link</th>
    <th>圖片連結</th>
  </tr>
  <tr>
    <td>1</td>
    <td>F1029</td>
    <td>陳擎耀</td>
    <td>張飛戰岳飛泡泡滿天飛-1</td>
    <td>2000</td>
    <td>藝術微噴、墨</td>
    <td>118 x 146 cm</td>
    <td>
    <a href="https://www.tfam.museum/Collection/CollectionDetail.aspx?ddlLang=zh-tw&CID=5150">https://www.tfam.museum</a></td>
    <td>
    <a href="https://www.tfam.museum/Collection/CollectionDetail.aspx?ddlLang=zh-tw&CID=5150">https://www.tfam.museum</a></td>

    <td>
    <a href="https://www.tfam.museum/File/Collection/Image/F10291.jpg?ddlLang=zh-tw" target="_blank">
    <img src="https://www.tfam.museum/File/Collection/Image/F10291.jpg?ddlLang=zh-tw">https://www.tfam.museum 
    </a>
    </td>
    
  </tr>
  <tr>
    <td>2</td>
    <td>F1030</td>
    <td>陳擎耀</td>
    <td>後庭開花系列 - 源氏物語、忠臣藏、水戶黃門、桃太郎、遠山金四郎、暴坊將軍</td>
    <td>2004</td>
    <td>C-Print、金箔、墨</td>
    <td>119×178 cm (×6)</td>
    <td>
    <a href="https://www.tfam.museum/Collection/CollectionDetail.aspx?ddlLang=zh-tw&CID=5149">https://www.tfam.museum</a></td>
    <td>
    <a href="https://www.tfam.museum/Collection/CollectionDetail.aspx?ddlLang=zh-tw&CID=5149">https://www.tfam.museum</a></td>
    <td>
    <a href="https://www.tfam.museum/File/Collection/Image/F10301.jpg" target="_blank">
    <img src="https://www.tfam.museum/File/Collection/Image/F10301.jpg"> https://www.tfam.museum 
    </a>
    </td>
  </tr>
  <tr>
    <td>3</td>
    <td>F1031</td>
    <td>鄧南光</td>
    <td>台北縣</td>
    <td>1960s</td>
    <td>銀鹽相紙</td>
    <td>29.8 x 19.8 cm</td>
    <td>
    <a href="https://www.tfam.museum/Collection/CollectionDetail.aspx?ddlLang=zh-tw&CID=5151">https://www.tfam.museum</a></td>
   ...

CSS

body{
   color: #606266;
 }
 table{
  border: 1px solid #96D4D4;
  border-collapse: collapse;
  border-style: dotted;
  }



th, td {
  border: 1px solid #96D4D4;
  border-collapse: collapse;
  border-style: dotted;
  padding: 5px;
  text-align: left;
  width: auto;
  min-width: 100px; /* Set a minimum width */
  height: 50px;
  overflow: hidden;
}

th {
  color: white;
  background-color: #4682B4;
}
table tr:nth-child(odd){
  background-color: rgb(70, 130, 180, 10%);
  
}
a{
  color: #2ec6b7;
  text-decoration: none;
}

img {
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 5px;
  width: 150px;
}

img:hover {
  box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
}