css教程

CSS table 样式

CSS表格样式：让网页排版更美观、易读

在网页设计中，表格一直是不可或缺的部分。它们用于展示数据、统计信息和布局等。而CSS作为网页样式的核心技术，自然也能对表格进行美化修饰，让表格更加美观、易读。本文将介绍如何使用CSS为表格添加各种样式，以提升网页质量。

# 1. 基础样式

在开始美化表格之前，我们先为表格添加一些基础样式。这些基础样式包括边框、背景色、字体等。以下是一个简单的CSS代码示例：

table {
  border-collapse: collapse; /* 合并边框 */
  width: 100%; /* 设置表格宽度为100% */
  margin-bottom: 10px; /* 设置表格底部外边距 */
}

th, td {
  border: 1px solid #000; /* 设置单元格边框颜色 */
  padding: 8px; /* 设置单元格内边距 */
  text-align: left; /* 设置文本左对齐 */
}

th {
  background-color: #f2f2f2; /* 设置表头背景色 */
  font-weight: bold; /* 设置表头字体加粗 */
}

# 2. 居中显示

为了让表格在页面中更加突出，我们可以使用CSS将其居中显示。这里提供一个简单的方法，通过设置text-align属性实现表格居中：

body {
  text-align: center; /* 设置页面主体居中 */
}

table {
  margin: 0 auto; /* 设置表格在外部居中 */
}

当然，你还可以为表格添加一些动态效果，如渐显、动画等。例如：

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.fade-in {
  animation: fadeIn 2s;
}

table {
   animation: fadeIn 2s;
}

# 3. 表格布局

在实际应用中，我们经常会遇到需要对表格进行布局的情况。CSS提供了多种布局方式，如下：

## 3.1 固定宽度布局

table {
  width: 100%;
  display: block;
}

th, td {
  display: block;
  width: 50%;
}

## 3.2 响应式布局

@media screen and (max-width: 600px) {
  table, thead, tbody, th, td, tr {
    display: block;
  }

  thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }

  tr {
    margin-bottom: 10px;
  }

  td {
    border: none;
    border-bottom: 1px solid #000;
    position: relative;
    padding-left: 50%;
  }

  td:before {
    content: attr(data-label);
    position: absolute;
    left: 0;
    width: 50%;
    padding-left: 8px;
    font-weight: bold;
  }
}

## 3.3 横向排列

table {
  width: 100%;
  display: flex;
}

th, td {
  display: flex;
  align-items: center;
  justify-content: center;
}

# 4. 颜色与边框

为了让表格更加美观，我们可以为其添加自定义颜色和边框样式。以下是一个示例：

.table-container {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1