基础 CSS 表格基础知识

简介

在网页开发中，表格是一种常用的数据展示和布局元素。使用 CSS （层叠样式表）可以改变表格的样式和布局，使其更好地适应网页的需求。

本文将为程序员介绍一些基础的 CSS 表格知识，包括如何设置表格的样式、如何改变单元格的样式、如何实现响应式表格等内容。

设置表格样式

要设置表格的样式，可以通过为表格元素（通常是 <table> 元素）添加 CSS 类或直接为其应用样式属性来实现。

例如，可以为表格添加一个类名，然后在 CSS 中定义该类的样式：

.table-style {
  /* 设置表格边框样式 */
  border: 1px solid #ccc;
  /* 设置表格内边距 */
  padding: 10px;
  /* 设置表格宽度 */
  width: 100%;
}

.table-style th {
  /* 设置表格标题样式 */
  background-color: lightgray;
  font-weight: bold;
}

.table-style td {
  /* 设置单元格样式 */
  border: 1px solid #ccc;
  padding: 5px;
}

然后为表格添加该类名：

<table class="table-style">
  <!-- 表格内容 -->
</table>

改变单元格样式

除了设置整个表格的样式外，还可以针对单独的单元格进行样式设置。可以使用 CSS 选择器来选择特定的单元格，并为其应用样式。

例如，要设置第一行的单元格背景颜色为蓝色，可以使用 :first-child 伪类选择器：

.table-style tr:first-child td {
  background-color: blue;
  color: white;
}

上述代码将第一行的所有单元格背景颜色设置为蓝色，文本颜色设置为白色。

响应式表格

在移动设备和不同屏幕尺寸上，需要确保表格能够适应不同的宽度。可以使用 CSS 媒体查询来实现响应式表格。

/* 当屏幕尺寸小于 768px 时，表格布局变为 block 以适应单列显示 */
@media screen and (max-width: 768px) {
  .table-style {
    display: block;
  }

  .table-style tr,
  .table-style td,
  .table-style th {
    display: block;
  }

  .table-style th {
    text-align: left;
    background-color: lightgray;
    font-weight: bold;
  }
}

上述代码将表格在屏幕宽度小于 768px 时，改变表格和单元格的布局方式，使其适应单列显示。

总结

通过使用 CSS，我们可以轻松设置和改变表格的样式。我们可以设置表格的边框样式、单元格的样式，甚至实现响应式的表格。

希望本文对你在 CSS 表格基础知识上有所帮助！