CSS对表格进行样式美化

发布时间：2023-05-12

在网页设计和开发中，表格是非常重要的元素。它可以用于展示表格化的数据，也可以用于网页布局和样式设计。常见的表格样式设计包括表格线、斑马条纹、边框阴影、表头固定等。而CSS样式表提供了丰富的样式属性和选择器，可以实现各种表格样式效果。

一、表格基本样式

1、表格线条样式

表格线条是最基本的表格样式，可以通过CSS的border属性设置，如下所示。

table {
  border-collapse: collapse;
}
td, th {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}

其中，border-collapse: collapse用于将表格边框合并为单一线条，避免重复绘制，减少DOM元素数量和页面渲染时间。td和th元素使用相同的样式，设置1像素的实线边框，内部使用8像素的填充。

2、表格斑马条纹

在长表格中，使用斑马条纹可以使网页看起来更加清晰整洁。可以通过CSS中的:nth-child伪类选择器实现斑马条纹效果。

tr:nth-child(even) {
  background-color: #f2f2f2;
}

以上代码用于选择表格中的偶数行，应用背景色为浅灰色，从而实现斑马条纹效果。可以通过设置奇偶性分别设定不同的背景色，更加灵活地控制表格样式。

二、表格进阶样式

1、表格阴影效果

可以为表格应用阴影效果，使表格浮现在页面上。可以通过CSS中的box-shadow属性来为表格添加阴影效果。

table {
  box-shadow: 2px 2px 10px #ccc;
}

以上代码表示为表格应用2像素的偏移距离和模糊半径为10像素的阴影，颜色为浅灰色。可以根据实际情况进行调整，使得页面效果更加美观。

2、表格圆角效果

可以为表格添加圆角效果，使其看起来更加柔和自然。可以通过CSS中的border-radius属性为表格的边框添加圆角效果。

table {
  border-collapse: collapse;
  border-radius: 5px;
  overflow: hidden;
}

以上代码将表格的边框圆角半径设置为5像素，并且使用overflow: hidden属性隐藏表格的溢出部分，避免圆角被遮挡造成不美观的效果。

3、表格宽度和高度

可以自由控制表格的宽度和高度，使其适应各种页面布局情况。可以通过CSS中的width和height属性来设置表格的宽度和高度。

table {
  width: 100%;
  height: 300px;
}

以上代码将表格的宽度设置为100%和高度设置为300像素，可以根据实际情况进行调整，使得表格具有更好的页面布局效果。

三、表格高级样式

1、表头固定效果

为了提高表格的可读性和易用性，可以为表头添加固定效果。当数据较多时，表头可以始终在页面上方，使用户方便查看和操作数据。可以通过使用position属性和一些CSS样式来实现表头固定效果。

<div class="table-container">
  <table>
    <thead>
      <tr>
        <th>Column 1</th>
        <th>Column 2</th>
        <th>Column 3</th>
        ...
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Row 1 Data 1</td>
        <td>Row 1 Data 2</td>
        <td>Row 1 Data 3</td>
        ...
      </tr>
      <tr>
        <td>Row 2 Data 1</td>
        <td>Row 2 Data 2</td>
        <td>Row 2 Data 3</td>
        ...
      </tr>
      ...
    </tbody>
  </table>
</div>

.table-container {
  overflow-y: auto;
  height: 300px;
}
.table-container thead th {
  position: sticky;
  top: 0;
  background-color: #fff;
}

以上代码用于实现表头固定效果。将表格放置在一个固定高度的容器中，利用overflow-y: auto属性来让容器出现纵向滚动条。thead元素中的th元素使用position: sticky属性和top: 0属性将表头固定在容器的顶部，保证表头始终可见。background-color: #fff属性用于覆盖默认的背景色，避免表头看起来生硬和不协调。

2、表格排序效果

当表格中有大量数据时，可以为表格添加排序功能，使用户方便查看和操作数据。可以通过使用一些JavaScript代码和CSS样式来实现表格排序效果。

<table>
  <thead>
    <tr>
      <th>Column 1</th>
      <th>Column 2</th>
      <th>Column 3</th>
      ...
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Row 1 Data 1</td>
      <td>Row 1 Data 2</td>
      <td>Row 1 Data 3</td>
      ...
    </tr>
    <tr>
      <td>Row 2 Data 1</td>
      <td>Row 2 Data 2</td>
      <td>Row 2 Data 3</td>
      ...
    </tr>
    ...
  </tbody>
</table>

table {
  border-collapse: collapse;
}
th {
  background-color: #f2f2f2;
  border: 1px solid #ccc;
  cursor: pointer;
  padding: 8px;
  text-align: left;
}
th:hover {
  background-color: #ddd;
}
th.asc:after {
  content: ' \2191';
}
th.desc:after {
  content: ' \2193';
}

const headers = document.querySelectorAll('th');
headers.forEach(header => {
  header.addEventListener('click', () => {
    const sortingDirection = header.getAttribute('data-sort') || 'desc';
    headers.forEach(th => {
      th.classList.remove('asc', 'desc');
      th.removeAttribute('data-sort');
    });
    if (sortingDirection === 'desc') {
      header.classList.add('asc');
      header.setAttribute('data-sort', 'asc');
    } else {
      header.classList.add('desc');
      header.setAttribute('data-sort', 'desc');
    }
    const index = Array.prototype.indexOf.call(headers, header);
    sortByColumn(index, sortingDirection);
  });
});
function sortByColumn(columnIndex, direction) {
  const rows = Array.from(document.querySelectorAll('tbody tr'));
  const modifier = direction === 'asc' ? 1 : -1;
  const sorters = [];
  const a = rows[0].children[columnIndex].textContent.toLowerCase();
  if (isNaN(a)) {
    rows.forEach(row => {
      const value = row.children[columnIndex].textContent.toLowerCase();
      sorters.push([value, row]);
    });
  } else {
    rows.forEach(row => {
      const value = Number(row.children[columnIndex].textContent.toLowerCase());
      sorters.push([value, row]);
    });
  }
  const sortedRows = sorters.sort((a, b) => {
    if (a[0] < b[0]) {
      return -1 * modifier;
    } else if (a[0] > b[0]) {
      return 1 * modifier;
    } else {
      return 0;
    }
  }).map(item => {
    return item[1];
  });
  const tbody = document.querySelector('tbody');
  tbody.innerHTML = '';
  sortedRows.forEach(row => {
    tbody.appendChild(row);
  });
}

以上代码用于实现表格排序效果。点击表头中的任何一个单元格，都会按照单元格中的数据排序，根据数据类型进行不同的排序方式。可以通过箭头图标表示排序方向，并且可以切换升序和降序两种排序方式。利用JavaScript和CSS的特性可以为表格添加各种复杂的交互效果和样式风格。

推荐文章