使用CSS优化表格展示数据

发布时间：2023-05-12

对于网站和应用程序的开发者来说，表格是展示信息的重要工具。但是，这个工具常常被过度使用，导致信息的展示效果变得复杂混乱。这时候，使用CSS对表格进行优化，可以使得表格更加易读和易用。

一、选择适当的颜色

网站中的色彩设计是至关重要的。当处理表格时，颜色的使用可以使信息更加明显和突出。当您使用RGB颜色时，尝试使用色调变化来强调表中最重要的数据。 例如，以下代码生成表格中交替出现的浅蓝和灰色背景：

table tr:nth-child(2n) {
  background-color: #f2f2f2;
}
table tr:nth-child(2n+1) {
  background-color: #fff;
}

注意，此代码在使用前需要先确保您的表格具有交替行，以便代码生效。 此外，您可以详细了解一些关于颜色设计的基本原则，就可以指导您更好地选择颜色。

二、悬停效果

表格的悬停效果是对CSS操作的一项基本功能。它可以使您的表格内容更加易读和易用。 可通过以下代码实现悬停效果：

table tbody tr:hover {
  background-color: #f5f5f5;
}

当您悬停在表格的任意一行上时，此代码将会将当行高亮。

三、表格排序

当表格包含大量数据时，按照指定的字段排序数据通常很有必要。为了实现这个目标，我们可以基于CSS中JavaScript来编写代码。 以下是一种典型的基于JavaScript的表格排序实现方法：

function sortByColumn(table, column, asc = true) {
  const dirModifier = asc ? 1 : -1;
  const tBody = table.tBodies[0];
  const rows = Array.from(tBody.querySelectorAll("tr"));
  const sortedRows = rows.sort((a, b) => {
    const aColText = a.querySelector(`td:nth-child(${ column + 1 })`).textContent.trim();
    const bColText = b.querySelector(`td:nth-child(${ column + 1 })`).textContent.trim();
    return aColText > bColText ? (1 * dirModifier) : (-1 * dirModifier);
  });
  while (tBody.firstChild) {
    tBody.removeChild(tBody.firstChild);
  }
  tBody.append(...sortedRows);
  table.querySelectorAll("th").forEach(th => th.classList.remove("th-sort-asc", "th-sort-desc"));
  table.querySelector(`th:nth-child(${ column + 1 })`).classList.toggle("th-sort-asc", asc);
  table.querySelector(`th:nth-child(${ column + 1 })`).classList.toggle("th-sort-desc", !asc);
}
document.querySelectorAll(".sortable thead th").forEach(headerCell => {
  headerCell.addEventListener("click", () => {
    const tableElement = headerCell.closest(".sortable");
    const headerIndex = Array.prototype.indexOf.call(headerCell.parentElement.children, headerCell);
    const currentIsAscending = headerCell.classList.contains("th-sort-asc");
    sortByColumn(tableElement, headerIndex, !currentIsAscending);
  });
});

此代码中重点使用了table.sorted、th-sort-asc和th-sort-desc类。当您单击表头时，JavaScript将重排数据并更新类，以反映升序和降序排序。

四、可折叠的表格

为了在同一屏幕空间中展示更多信息，具有折叠表格的网页或应用程序将会特别有用。 以下是一个简单的展示如何制作可折叠表格的代码样例：

table {
  border-collapse: collapse;
  width: 100%;
}
th, td {
  text-align: left;
  padding: 8px;
}
th {
  background-color: #4CAF50;
  color: white;
}
tr:nth-child(even) {
  background-color: #f2f2f2;
}
button {
  background-color: inherit;
  color: inherit;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
  outline: inherit;
}

<table>
  <thead>
    <tr>
      <th>标题 1</th>
      <th>标题 2</th>
      <th>标题 3</th>
      <th>操作</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>数据 1</td>
      <td>数据 2</td>
      <td>数据 3</td>
      <td><button class="collapsible">折叠</button></td>
    </tr>
    <tr>
      <td colspan="4">
        <div class="collapsible-content">
          <table>
            <thead>
              <tr>
                <th>标题 4</th>
                <th>标题 5</th>
                <th>标题 6</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>数据 4.1</td>
                <td>数据 5.1</td>
                <td>数据 6.1</td>
              </tr>
              <tr>
                <td>数据 4.2</td>
                <td>数据 5.2</td>
                <td>数据 6.2</td>
              </tr>
              <tr>
                <td>数据 4.3</td>
                <td>数据 5.3</td>
                <td>数据 6.3</td>
              </tr>
            </tbody>
          </table>
        </div>
      </td>
    </tr>
    <tr>
      <td>数据 7</td>
      <td>数据 8</td>
      <td>数据 9</td>
      <td><button class="collapsible">折叠</button></td>
    </tr>
    <tr>
      <td colspan="4">
        <div class="collapsible-content">
          <table>
            <thead>
              <tr>
                <th>标题 10</th>
                <th>标题 11</th>
                <th>标题 12</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>数据 10.1</td>
                <td>数据 11.1</td>
                <td>数据 12.1</td>
              </tr>
              <tr>
                <td>数据 10.2</td>
                <td>数据 11.2</td>
                <td>数据 12.2</td>
              </tr>
              <tr>
                <td>数据 10.3</td>
                <td>数据 11.3</td>
                <td>数据 12.3</td>
              </tr>
            </tbody>
          </table>
        </div>
      </td>
    </tr>
  </tbody>
</table>
<script>
const coll = document.getElementsByClassName("collapsible");
let i;
for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");
    const content = this.nextElementSibling;
    if (content.style.maxHeight){
      content.style.maxHeight = null;
    } else {
      content.style.maxHeight = content.scrollHeight + "px";
    } 
  });
}
</script>

此代码通过添加CSS样式和JavaScript代码，实现了可折叠表格功能。当用户点击折叠按钮时，JavaScript将根据需求展开或收缩表格行。

五、更多CSS优化技巧

除了上述技巧外，还有很多其他的CSS技巧可用于表格优化。 例如，我们可以通过向表格添加间距、阴影或动画效果来实现更有吸引力的表格。我们还可以探索CSS文件上传文件，自定义表格样式，以及响应式表格设计等技术。 最好的方法是尝试不同的CSS优化技巧，并确定哪些方法适用于您的表格和数据需求。

推荐文章