CSS對表格進行樣式美化

在網頁設計和開發中，表格是非常重要的元素。它可以用於展示表格化的數據，也可以用於網頁布局和樣式設計。常見的表格樣式設計包括表格線、斑馬條紋、邊框陰影、表頭固定等。而CSS樣式表提供了豐富的樣式屬性和選擇器，可以實現各種表格樣式效果。

一、表格基本樣式

1、表格線條樣式

表格線條是最基本的表格樣式，可以通過CSS的border屬性設置，如下所示。

table {
  border-collapse: collapse;
}

td, th {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}

其中，border-collapse:collapse用於將表格邊框合併為單一線條，避免重複繪製，減少DOM元素數量和頁面渲染時間。td和th元素使用相同的樣式，設置1像素的實線邊框，內部使用8像素的填充。

2、表格斑馬條紋

在長表格中，使用斑馬條紋可以使網頁看起來更加清晰整潔。可以通過CSS中的:nth-child偽類選擇器實現斑馬條紋效果。

tr:nth-child(even) {
  background-color: #f2f2f2;
}

以上代碼用於選擇表格中的偶數行，應用背景色為淺灰色，從而實現斑馬條紋效果。可以通過設置奇偶性分別設定不同的背景色，更加靈活地控制表格樣式。

二、表格進階樣式

1、表格陰影效果

可以為表格應用陰影效果，使表格浮現在頁面上。可以通過CSS中的box-shadow屬性來為表格添加陰影效果。

table {
  box-shadow: 2px 2px 10px #ccc;
}

以上代碼表示為表格應用2像素的偏移距離和模糊半徑為10像素的陰影，顏色為淺灰色。可以根據實際情況進行調整，使得頁面效果更加美觀。

2、表格圓角效果

可以為表格添加圓角效果，使其看起來更加柔和自然。可以通過CSS中的border-radius屬性為表格的邊框添加圓角效果。

table {
  border-collapse: collapse;
  border-radius: 5px;
  overflow: hidden;
}

以上代碼將表格的邊框圓角半徑設置為5像素，並且使用overflow:hidden屬性隱藏表格的溢出部分，避免圓角被遮擋造成不美觀的效果。

3、表格寬度和高度

可以自由控制表格的寬度和高度，使其適應各種頁面布局情況。可以通過CSS中的width和height屬性來設置表格的寬度和高度。

table {
  width: 100%;
  height: 300px;
}

以上代碼將表格的寬度設置為100%和高度設置為300像素，可以根據實際情況進行調整，使得表格具有更好的頁面布局效果。

三、表格高級樣式

1、表頭固定效果

為了提高表格的可讀性和易用性，可以為表頭添加固定效果。當數據較多時，表頭可以始終在頁面上方，使用戶方便查看和操作數據。可以通過使用position屬性和一些JavaScript代碼來實現表頭固定效果。

<div class="table-container">
  <table>
    <thead>
      <tr>
        <th>Column 1</th>
        <th>Column 2</th>
        <th>Column 3</th>
          ...
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Row 1 Data 1</td>
        <td>Row 1 Data 2</td>
        <td>Row 1 Data 3</td>
          ...
      </tr>
      <tr>
        <td>Row 2 Data 1</td>
        <td>Row 2 Data 2</td>
        <td>Row 2 Data 3</td>
          ...
      </tr>
        ...
    </tbody>
  </table>
</div>

<style>
.table-container {
  overflow-y: auto;
  height: 300px;
}

.table-container thead th {
  position: sticky;
  top: 0;
  background-color: #fff;
}
</style>

以上代碼用於實現表頭固定效果。將表格放置在一個固定高度的容器中，利用overflow-y: auto屬性來讓容器出現縱向滾動條。thead元素中的th元素使用position: sticky屬性和top: 0屬性將表頭固定在容器的頂部，保證表頭始終可見。background-color: #fff屬性用於覆蓋默認的背景色，避免表頭看起來生硬和不協調。

2、表格排序效果

當表格中有大量數據時，可以為表格添加排序功能，使用戶方便查看和操作數據。可以通過使用一些JavaScript代碼和CSS樣式來實現表格排序效果。

<table>
  <thead>
    <tr>
      <th>Column 1</th>
      <th>Column 2</th>
      <th>Column 3</th>
        ...
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Row 1 Data 1</td>
      <td>Row 1 Data 2</td>
      <td>Row 1 Data 3</td>
        ...
    </tr>
    <tr>
      <td>Row 2 Data 1</td>
      <td>Row 2 Data 2</td>
      <td>Row 2 Data 3</td>
        ...
    </tr>
      ...
  </tbody>
</table>

<style>
table {
  border-collapse: collapse;
}

th {
  background-color: #f2f2f2;
  border: 1px solid #ccc;
  cursor: pointer;
  padding: 8px;
  text-align: left;
}

th:hover {
  background-color: #ddd;
}

th.asc:after {
  content: ' \2191';
}

th.desc:after {
  content: ' \2193';
}
</style>

<script>
const headers = document.querySelectorAll('th');

headers.forEach(header => {
  header.addEventListener('click', () => {
    const sortingDirection = header.getAttribute('data-sort') || 'desc';

    headers.forEach(th => {
      th.classList.remove('asc', 'desc');
      th.removeAttribute('data-sort');
    });

    if(sortingDirection === 'desc') {
      header.classList.add('asc');
      header.setAttribute('data-sort', 'asc');
    } else {
      header.classList.add('desc');
      header.setAttribute('data-sort', 'desc');
    }

    const index = Array.prototype.indexOf.call(headers, header);
    sortByColumn(index, sortingDirection);
  });
});

function sortByColumn(columnIndex, direction) {
  const rows = Array.from(document.querySelectorAll('tbody tr'));
  const modifier = direction === 'asc' ? 1 : -1;
  const sorters = [];
  const a = rows[0].children[columnIndex].textContent.toLowerCase();

  if(isNaN(a)) {
    rows.forEach(row => {
      const value = row.children[columnIndex].textContent.toLowerCase();
      sorters.push([value, row]);
    });
  } else {
    rows.forEach(row => {
      const value = Number(row.children[columnIndex].textContent.toLowerCase());
      sorters.push([value, row]);
    });
  }

  const sortedRows = sorters.sort((a, b) => {
    if(a[0]  b[0]) {
      return 1 * modifier;
    } else {
      return 0;
    }
  }).map(item => {
    return item[1];
  });

  const tbody = document.querySelector('tbody');
  tbody.innerHTML = '';

  sortedRows.forEach(row => {
    tbody.appendChild(row);
  });
}
</script>

以上代碼用於實現表格排序效果。點擊表頭中的任何一個單元格，都會按照單元格中的數據排序，根據數據類型進行不同的排序方式。可以通過箭頭圖標表示排序方向，並且可以切換升序和降序兩種排序方式。利用JavaScript和CSS的特性可以為表格添加各種複雜的交互效果和樣式風格。