CSS+HTML：让表格美出新高度！

CSS+HTML：让表格美出新高度！

引用

CSDN

等

12

来源

1.

https://blog.csdn.net/liyuchenii/article/details/128061756

2.

https://blog.csdn.net/qq_18947751/article/details/100589831

3.

https://blog.csdn.net/u014022865/article/details/53232279

4.

https://blog.csdn.net/kstg5208197/article/details/68583038

5.

https://jingyan.baidu.com/article/b907e62705f50706e7891c80.html

6.

https://blog.csdn.net/weixin_62115642/article/details/125807269

7.

https://blog.csdn.net/qq_22744093/article/details/132057801

8.

https://blog.csdn.net/weixin_64965154/article/details/130694478

9.

https://www.cnblogs.com/coco1s/p/16422777.html

10.

https://my.oschina.net/emacs_8604746/blog/16749725

11.

http://www.webkaka.com/tutorial/html/2020/022578/

12.

https://modstart.com/p/k97p5vqxu7lhurmc

在网页开发中，表格是最常见的数据展示方式之一。但是，一个未经美化的表格往往显得枯燥乏味，难以吸引用户的注意力。幸运的是，通过CSS，我们可以轻松地让表格变得更加美观和易读。本文将从基础样式设置、斑马条纹效果、hover效果以及响应式设计等多个方面，详细介绍如何用CSS和HTML打造一个高大上的表格。

首先，我们需要了解表格的基本HTML结构：

<table>
  <thead>
    <tr>
      <th>表头1</th>
      <th>表头2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>数据1</td>
      <td>数据2</td>
    </tr>
    <tr>
      <td>数据3</td>
      <td>数据4</td>
    </tr>
  </tbody>
</table>

接下来，我们可以通过CSS来设置表格的基础样式：

table {
  width: 100%;
  border-collapse: collapse;
}

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

th {
  background-color: #f2f2f2;
  font-weight: bold;
}

为了让表格看起来更有层次感，我们可以使用斑马条纹效果。这可以通过CSS的:nth-child伪类选择器实现：

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

这个选择器会选中所有偶数行（从0开始计数），并为其设置背景色。如果你想让奇数行着色，可以使用odd关键字：

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

更有趣的是，你可以实现更复杂的隔行变色效果：

tr:nth-child(3n-1) {
  background: rgb(255, 0, 255);
}
tr:nth-child(3n) {
  background: rgb(255, 255, 0);
}
tr:nth-child(3n+1) {
  background: rgb(0, 255, 255);
}

为了让表格更加交互友好，我们可以添加hover效果。当用户将鼠标悬停在某行上时，该行的背景色和文字颜色会发生变化：

tr:hover {
  background-color: #e80027;
  color: #ffffff;
}

在移动设备普及的今天，响应式设计已经成为必备技能。我们需要确保表格在不同屏幕尺寸下都能良好展示。这里的关键是使用媒体查询（media query）：

@media screen and (max-width: 600px) {
  table {
    border: 0;
  }
  table thead {
    display: none;
  }
  table tr {
    display: block;
    margin-bottom: 10px;
  }
  table td {
    border-bottom: 1px solid #ddd;
    display: block;
  }
}

这段代码会在屏幕宽度小于600px时生效，将表格从传统的横向布局转换为纵向布局。但是，我们还需要解决一个关键问题：如何在小屏幕下展示表头信息？

这里需要用到CSS伪元素和HTML的data-label属性：

<td data-label="表头1">数据1</td>
<td data-label="表头2">数据2</td>

@media screen and (max-width: 600px) {
  table td {
    position: relative;
    display: block;
    text-align: right;
  }
  table td::before {
    position: absolute;
    left: 10px;
    right: 0;
    content: attr(data-label);
  }
}

这样，即使在小屏幕上，用户也能清晰地看到每列数据对应的表头信息。

通过以上几个步骤，你就可以创建一个既美观又实用的HTML表格了。这些CSS技巧不仅能提升数据的可读性，还能让你的工作文档看起来更加专业。快去试试吧！