在CSS中，我們可以使用一些技巧來實現對表格的排序，讓表格數據更加清晰易讀。今天就來介紹一下如何實現表格排序。 首先，我們需要給表格中的每一列添加一個可排序的指示器，例如一個箭頭圖標，表示該列是可排序的。我們可以在CSS中使用偽元素來實現這個效果，例如以下代碼： ```css table th.sortable::after { content: "↑"; margin-left: 5px; } table th.sortable.asc::after { content: "↓"; } ``` 在這段代碼中，我們為所有可排序的表頭單元格添加了一個偽元素 `::after`。當該列被排序時，我們會添加一個 `.asc` 類，為箭頭圖標改變方向。 接下來，我們需要為表頭單元格添加一個點擊事件，在點擊時按照該列的數據進行排序。這個事件可以通過JavaScript來實現，但是我們也可以使用一個帶有偽元素的復選框來實現： ```css table th input[type="checkbox"] { position: absolute; opacity: 0; cursor: pointer; } table th input[type="checkbox"]::before { content: ""; display: inline-block; width: 16px; height: 16px; border: 1px solid #666; border-radius: 3px; margin-right: 5px; } table th input[type="checkbox"]:checked::before { content: "?"; background-color: #666; color: #fff; text-align: center; line-height: 16px; } ``` 在這段代碼中，我們為每一個表頭單元格添加了一個隱藏的復選框，當用戶點擊表頭單元格時，實際上點擊的是復選框，并觸發了其 `:checked` 偽類。這樣，我們就可以在 CSS 中通過復選框的選擇狀態來根據表格列進行排序了。 最后，我們需要編寫一些 JavaScript 代碼來實現實際的排序。這個過程可以是根據表格數據進行排序，將排序過的數據重新渲染到表格中。 ```javascript function sortTable(col, descending) { var tbody = table.querySelector("tbody"); var rows = Array.from(tbody.querySelectorAll("tr")); rows.sort(compareCells(col, descending)); rows.forEach(row =>tbody.appendChild(row)); } function compareCells(col, descending) { var multiplier = descending ? -1 : 1; return function(rowA, rowB) { var cellA = rowA.cells[col].textContent; var cellB = rowB.cells[col].textContent; return multiplier * cellA.localeCompare(cellB); }; } ``` 在這段代碼中，我們通過 `sortTable` 函數來對表格數據進行排序。該函數中的 `compareCells` 是一個比較函數，根據每行的數據進行排序。在 `compareCells` 函數中，我們通過 `textContent` 屬性來獲取每個單元格的文本值，并使用 `localeCompare` 函數來進行字符串比較。 現在，你已經知道如何在 CSS 中實現表格排序了。只需按照上述步驟在你的項目中實現排序，你就能夠讓你的表格更容易讀取和使用。