使用CSS，我如何在表格中按行和列排序？

要在表格中按行和列排序，可以使用CSS和JavaScript结合的方法来实现。下面是一个基本的示例：

首先，在HTML中创建一个包含表格的容器：

<div id="table-container">
  <table id="my-table">
    <thead>
      <tr>
        <th>列1</th>
        <th>列2</th>
        <th>列3</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>行1 列1</td>
        <td>行1 列2</td>
        <td>行1 列3</td>
      </tr>
      <tr>
        <td>行2 列1</td>
        <td>行2 列2</td>
        <td>行2 列3</td>
      </tr>
      <tr>
        <td>行3 列1</td>
        <td>行3 列2</td>
        <td>行3 列3</td>
      </tr>
    </tbody>
  </table>
</div>

接下来，使用CSS样式来添加交互效果和排序功能：

/* 添加鼠标悬停效果 */
#my-table tbody tr:hover {
  background-color: #f5f5f5;
}

/* 添加排序箭头图标 */
#my-table thead th {
  cursor: pointer;
}

#my-table thead th::after {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  vertical-align: middle;
  margin-left: 5px;
  opacity: 0.5;
}

#my-table thead .asc::after {
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 4px solid #333;
}

#my-table thead .desc::after {
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid #333;
}

最后，在JavaScript中编写排序逻辑：

var table = document.getElementById("my-table");
var thArray = Array.from(table.getElementsByTagName("th"));

thArray.forEach(function(th, index) {
  th.addEventListener("click", function() {
    var rows = Array.from(table.getElementsByTagName("tr"));
    var isAscending = true;

    if (this.classList.contains("asc")) {
      this.classList.remove("asc");
      this.classList.add("desc");
      isAscending = false;
    } else {
      this.classList.remove("desc");
      this.classList.add("asc");
    }

    var columnIndex = index;
    rows.shift(); // 移除表头行
    rows.sort(function(rowA, rowB) {
      var cellA = rowA.getElementsByTagName("td")[columnIndex].textContent.trim();
      var cellB = rowB.getElementsByTagName("td")[columnIndex].textContent.trim();

      if (isAscending) {
        return cellA.localeCompare(cellB);
      } else {
        return cellB.localeCompare(cellA);
      }
    });

    rows.forEach(function(row) {
      table.tBodies[0].appendChild(row);
    });
  });
});

以上代码会根据点击的表头列进行排序，首次点击时按升序排序，再次点击则按降序排序。点击表头列时，会为对应的th元素添加asc或desc类，以便显示排序箭头图标。

请注意，这只是一个基本示例，实际情况中可能需要根据具体需求进行适当的调整和优化。

腾讯云相关产品和产品介绍链接地址：