優化網頁表格樣式的技巧

一、表格基礎樣式

表格是網頁常用的展示數據的方式，優化表格的樣式可以提升用戶體驗，以下是我們常用的基礎樣式。

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  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，優化表格樣式都是十分容易的。