CSS 美化清單與表格的設計實例

<ul class="fancy-list">
  <li>首頁</li>
  <li>產品特色</li>
  <li>定價方案</li>
  <li>聯絡我們</li>
</ul>

.fancy-list {
  list-style: none;          /* 移除預設項目符號 */
  padding-left: 1.2em;       /* 左側留白以容納自訂符號 */
}
.fancy-list li::marker {
  content: "◆ ";             /* 將符號替換成菱形符號,後方加空格 */
  font-size: 1.2em;          /* 符號放大為原來的1.2倍 */
  color: #e67e22;            /* 符號顏色採用亮橘色 */
}

<ul class="nav-bar">
  <li><a href="#">首頁</a></li>
  <li><a href="#">關於我們</a></li>
  <li><a href="#">服務項目</a></li>
  <li><a href="#">聯絡</a></li>
</ul>

.nav-bar {
  list-style: none;               /* 移除項目符號 */
  padding: 0;
  margin: 0;
  background-color: #34495e;      /* 導覽列背景色 */
  text-align: center;             /* 讓項目在水平方向置中 */
}
.nav-bar li {
  display: inline-block;          /* 將每個清單項目橫向排列 */
  margin: 0 15px;                 /* 每個清單項目左右間距 */
}
.nav-bar a {
  color: #ecf0f1;                 /* 連結文字採用淺色,與深色背景對比 */
  text-decoration: none;          /* 去除預設底線 */
  padding: 10px 0;
  display: inline-block;
}
.nav-bar a:hover {
  color: #ffffff;                 /* 滑鼠懸停時文字顏色變純白 */
  border-bottom: 2px solid #ecf0f1; /* 懸停時在下方繪製細線強調 */
}

<ol class="steps-list">
  <li>註冊帳號</li>
  <li>填寫個人資料</li>
  <li>確認電子郵件</li>
  <li>開始使用服務</li>
</ol>

.steps-list {
  counter-reset: step-counter;   /* 重置計數器 */
  list-style: none;              /* 移除預設編號樣式 */
  padding: 0;
}
.steps-list li {
  counter-increment: step-counter;            /* 遇到一個<li>,計數器+1 */
  margin: 0.5em 0 0.5em 2.5em;                /* 下方加入適度間距,左側留空放置編號 */
  position: relative;                        /* 讓子元素定位相對於<li> */
}
.steps-list li::before {
  content: counter(step-counter);            /* 插入計數器當前值作為內容 */
  position: absolute;
  left: -2.5em;                              /* 將編號定位在項目左側 */
  top: 50%;
  transform: translateY(-50%);               /* 垂直置中 */
  background: #3498db;                       /* 藍色圓形背景 */
  color: #fff;
  font-weight: bold;
  width: 1.8em; height: 1.8em;               /* 圓的尺寸 */
  line-height: 1.8em;                        /* 文字垂直置中 */
  text-align: center;                        /* 文字水平置中 */
  border-radius: 50%;                        /* 圓形 */
}

<table class="zebra-table">
  <thead>
    <tr>
      <th>產品名稱</th>
      <th>價格</th>
      <th>庫存</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>產品 A</td>
      <td>$120</td>
      <td>50</td>
    </tr>
    <tr>
      <td>產品 B</td>
      <td>$90</td>
      <td>20</td>
    </tr>
    <tr>
      <td>產品 C</td>
      <td>$150</td>
      <td>0</td>
    </tr>
    <tr>
      <td>產品 D</td>
      <td>$300</td>
      <td>10</td>
    </tr>
  </tbody>
</table>

.zebra-table {
  width: 100%;
  border-collapse: collapse;   /* 合併邊框,消除儲存格之間的空隙 */
  font-family: sans-serif;
}
.zebra-table th, .zebra-table td {
  padding: 12px;              /* 內距讓內容不緊貼格線 */
  border: 1px solid #dddddd;  /* 淡淡的灰色邊框 */
  text-align: left;
}
.zebra-table tbody tr:nth-of-type(even) {
  background-color: #f9f9f9;   /* 偶數列背景設為淺灰 (斑馬紋) */
}
.zebra-table tbody tr:hover {
  background-color: #e8f6ff;   /* 懸停行背景設為淡藍,凸顯所在列 */
}
.zebra-table thead {
  background-color: #3498db;   /* 表頭背景色 */
  color: #fff;
}
.zebra-table thead th {
  font-weight: bold;
}

<table class="collapsible-table" width="100%">
  <thead>
    <tr><th>訂單編號</th><th>客戶</th><th>詳情</th></tr>
  </thead>
  <tbody>
    <tr>
      <td>#1023</td>
      <td>王小明</td>
      <td>
        <details>
          <summary>查看詳情</summary>
          <ul>
            <li>商品：紅色T恤</li>
            <li>數量：2</li>
            <li>小計：$40</li>
          </ul>
        </details>
      </td>
    </tr>
    <tr>
      <td>#1024</td>
      <td>李小華</td>
      <td>
        <details>
          <summary>查看詳情</summary>
          <p>此訂單包含特殊備註,需要人工確認。</p>
        </details>
      </td>
    </tr>
  </tbody>
</table>

.collapsible-table details summary {
  cursor: pointer;             /* 懸停時游標變成指尖,提高可點擊感 */
  color: #2980b9;
  font-weight: 500;
}
.collapsible-table details summary::after {
  content: " ▼";               /* 在摘要文字後加入下箭頭符號 */
}
.collapsible-table details[open] summary::after {
  content: " ▲";               /* 展開狀態時用上箭頭表示 */
}

<table class="toggle-table">
  <tbody>
    <tr class="main-row">
      <td>分組 A</td>
      <td>點擊展開詳情</td>
    </tr>
    <tr class="detail-row">
      <td colspan="2">分組 A 的詳細內容...</td>
    </tr>
    <!-- ...其他組別資料列... -->
  </tbody>
</table>

<style>
.detail-row { 
  display: none; /* 詳細內容列初始隱藏 */
}
</style>

<script>
document.querySelectorAll('.main-row').forEach(row => {
  row.addEventListener('click', () => {
    const detailRow = row.nextElementSibling;
    if (detailRow && detailRow.classList.contains('detail-row')) {
      // 切換顯示或隱藏下一列
      detailRow.style.display = detailRow.style.display === 'none' ? 'table-row' : 'none';
    }
  });
});
</script>

<div class="table-responsive">
  <table>
    <!-- 表格內容 -->
  </table>
</div>

<style>
.table-responsive {
  max-width: 100%;
  overflow-x: auto;    /* 當超出寬度時,允許橫向捲動 */
}
</style>