表格样式在网页设计中起着重要的作用，可以通过CSS来美化和定制表格的外观。以下是一些常见的CSS表格样式示例：

1. 基本表格样式：
table {
  width: 100%;
  border-collapse: collapse;
}

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

th {
  background-color: #f2f2f2;
}

2. 条纹状表格：
table {
  width: 100%;
  border-collapse: collapse;
}

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

th {
  background-color: #f2f2f2;
}

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

3. 鼠标悬停高亮：
table {
  width: 100%;
  border-collapse: collapse;
}

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

th {
  background-color: #f2f2f2;
}

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

4. 圆角表格：
table {
  width: 100%;
  border-collapse: collapse;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

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

th {
  background-color: #f2f2f2;
}

5. 响应式表格：
table {
  width: 100%;
  border-collapse: collapse;
  overflow-x: auto;
}

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

th {
  background-color: #f2f2f2;
}

这些示例中，border-collapse: collapse; 用于去除表格默认的边框重叠效果，padding 用于设置单元格内边距，background-color 用于设置表头和条纹背景颜色，border 用于设置边框样式。可以根据具体需求进行调整和组合，以满足不同的设计要求。


转载请注明出处：http://www.zyzy.cn/article/detail/4050/CSS