使用 CSS 包装表格单元格

在 HTML 中，表格是一种常用的标记形式，但是在某些情况下，需要使用 CSS 来定制表格的样式和外观，尤其是单元格的样式。

1. 使用 CSS 类来包装单元格

通过给单元格（<td>）标签添加一个 CSS 类，可以为单元格定义特定的样式。如下所示：

<td class="my-cell">单元格内容</td>

.my-cell {
  background-color: #eaeaea;
  border: 1px solid #ccc;
  padding: 10px;
}

在这个例子中，我们定义了一个名为 my-cell 的 CSS 类，它设置了单元格的背景色、边框和内边距。可以根据需要定制更改其他样式属性。

2. 使用 CSS 属性来包装单元格

可以将样式属性应用于单元格本身，而不是将其封装在 CSS 类中。例如：

<td style="background-color: #eaeaea; border: 1px solid #ccc; padding: 10px;">单元格内容</td>

这个例子中的 CSS 样式与前面的示例相同，只需在单元格上直接定义样式属性即可。

3. 使用 CSS 伪类来包装单元格

CSS 伪类是针对元素的特殊状态或位置的选择器。可以将伪类应用于单元格来定义某些状态下的样式，例如：

td:hover {
  background-color: #ccc;
}

这个例子中，在鼠标悬停在单元格上时，其背景色将变为灰色。

4. CSS 表格样式

还可以使用 CSS 表格样式属性来定义整个表格的外观，例如：

table {
  border-collapse: collapse;
}

th, td {
  border: 1px solid #ccc;
  padding: 10px;
}

在这个例子中，我们将表格的边框合并在一起，使其看起来更整齐，并将所有单元格的边框和内边距设置为相同的值。

以上是一些使用 CSS 包装表格单元格的基本方法。您可以根据需要定制更多的样式属性和伪类来创建符合需求的表格样式。