一、表格基础样式

表格是网页常用的展示数据的方式，优化表格的样式可以提升用户体验，以下是我们常用的基础样式。

table {
  border-collapse: collapse;
  width: 100%;
}
thead {
  background-color: #f1f1f1;
}
th, td {
  text-align: left;
  padding: 8px;
}
tr:nth-child(even) {
  background-color: #f2f2f2;
}
th {
  background-color: #4CAF50;
  color: white;
}

我们可以利用 border-collapse 属性将单元格边框合并，这样可以使表格看起来更为整洁。使用 width: 100% 属性使表格宽度占满整个父元素。通过 thead 元素的 background-color 属性让表格表头区域的颜色有所区别。使用 text-align 属性确定单元格中文本的对齐方式，padding 属性增加单元格内部与边框的间距，background-color 属性增加斑马线样式。最后，th 元素通过 background-color 属性定义表头单元格的背景色和 color 属性定义字体颜色。

二、表格样式优化

1. 增加斑马线颜色的对比度

默认情况下，斑马线的颜色与单元格填充颜色相同，因此可能难以识别。为了提高可读性，应该增加斑马线颜色的对比度。下面是实现这种效果的 CSS 代码：

table {
  border-collapse: collapse;
  width: 100%;
}
tr:nth-child(even) {
  background-color: #f2f2f2;
}
tr:nth-child(odd) {
  background-color: #fff;
}

这种方法是使用不同的背景颜色来区分相邻的行。

2. 固定表头和列

当表格超出屏幕时，用户必须滚动才能看到全部内容。这种情况下，表头和列标注可能会离开视图，变得难以识别。要解决这个问题，可以使用 CSS 的 position: fixed 属性。

table {
  width: 100%;
}
thead {
  position: fixed;
}
tbody tr td:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  background: #fff;
  border-right: 1px solid #ddd;
}
tbody tr td {
  border-bottom: 1px solid #ddd;
}

这些 CSS 规则将表头设置为固定，这样即使您使用滚动条滚动页面，表头也会保持在视图的顶部。同时，使用 position: sticky 属性让标签栏也跟随表头一起固定，left: 0 和 z-index: 1 的值则用于确定要固定的列在表格中的位置。background 和 border-right 属性则用于渲染背景色和右边框。

3. 隐藏边框和表格线

有时，人们想要实现更加简洁的表格样式，这时候去掉边框和表格线就是一个不错的选择。

table {
  border: none;
  width: 100%;
  border-collapse: collapse;
}
td {
  padding: 5px;
  vertical-align: top;
}
td:not(:last-child) {
  border-right: 1px solid #ccc;
}

这些 CSS 规则会删除表格周围的边框，内部单元格也使用“无边框”的样式，同时使用 border-right 属性增加了单元格之间的线条。

三、通过 JS 实现表格样式

有时候，样式优化超出了 CSS 的能力范围，就需要使用 JavaScript 修改 HTML 文档来实现。以下是一些实现方法：

1. 固定表头

(function () {
  var table = document.querySelector('table');
  var tableHead = table.querySelector('thead');
  var tableBody = table.querySelector('tbody');
  tableHead.style.position = 'fixed';
  tableHead.style.zIndex = 10;
  tableHead.style.backgroundColor = '#fff';
  tableHead.style.top = 0;
  var ths = table.querySelectorAll('th');
  var trs = tableBody.querySelectorAll('tr');
  for(var i=0; i<trs.length; i++) {
    trs[i].querySelector('td:first-child').style.position = "sticky";
    trs[i].querySelector('td:first-child').style.left = "0";
    trs[i].querySelector('td:first-child').style.background = "#fff";
    trs[i].querySelector('td:first-child').style.zIndex = "1";
    trs[i].querySelector('td:first-child').style.borderRight = "1px solid #ddd";
  }
})();

这段 JS 代码选中了 HTML 文档中的 table 标签，然后找到其 thead 和 tbody 元素。使用 style 属性将表头固定在页面顶部，然后使用循环遍历表格的每一行，并将第一个单元格（即列标注）固定到表格的左侧。

2. 调整表格宽度

(function() {
  var ths = document.querySelectorAll('th');
  var trs = document.querySelectorAll('tr');
  var tds = document.querySelectorAll('td');
  var widths = [];
  for (let i = 0; i < trs.length; i++) {
    var row = trs[i];
    for (let j = 0; j < tds.length; j++) {
      var cell = tds[j];
      if (!widths[j]) {
        widths[j] = cell.clientWidth;
      } else if (cell.clientWidth > widths[j]) {
        widths[j] = cell.clientWidth;
      }
    }
  }
  for (let i = 0; i < ths.length; i++) {
    var th = ths[i];
    th.style.width = `${widths[i]}px`;
  }
  for (let i = 0; i < trs.length; i++) {
    var tds = trs[i].querySelectorAll('td');
    for (let j = 0; j < tds.length; j++) {
      var td = tds[j];
      td.style.width = `${widths[j]}px`;
    }
  }
})();

这段 JS 代码处理表格宽度，遍历了 HTML 文档中的所有表格行和单元格。通过 clientWidth 属性确定了每个单元格的宽度，然后将宽度赋值给列标签和每个表格单元格。这样表格看起来就更舒适和整洁。

四、总结

通过上述技巧，可以大幅优化网页中表格的样式，提升页面的用户体验。正确的表格样式可以吸引用户的视线，帮助用户更快更好地了解数据，而无论是通过 CSS 还是 JavaScript，优化表格样式都是十分容易的。

优化网页表格样式的技巧