CSS 嵌套表格行

在本文中，我们将介绍如何使用CSS来实现嵌套表格行效果。嵌套表格行是指在表格的一个单元格中插入另一个表格作为子表格，以展示更复杂的结构和信息。

阅读更多：CSS 教程

1. 创建父表格

首先，我们需要创建一个父表格，用于容纳子表格的单元格。假设我们有一个简单的父表格，其中有4个列和3个行，如下所示：

<table class="parent-table">
  <tr>
    <th>姓名</th>
    <th>年龄</th>
    <th>性别</th>
    <th>城市</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>25</td>
    <td>男</td>
    <td>北京</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>30</td>
    <td>男</td>
    <td>上海</td>
  </tr>
  <tr>
    <td>王五</td>
    <td>28</td>
    <td>女</td>
    <td>广州</td>
  </tr>
</table>

2. 添加子表格行

接下来，我们将在父表格的一个单元格中插入子表格作为表格行。在这个例子中，我们选择将子表格插入到第一行的“姓名”单元格中。我们可以使用CSS的伪元素来实现这个效果。首先，我们需要给“姓名”单元格添加一个class，以便以后对其进行样式化：

<td class="nested-row">张三</td>

然后，我们可以使用CSS的伪元素::after来插入一个新的空行，并设置其内容为我们想要插入的子表格：

td.nested-row::after {
  content: " ";
  display: block;
}

现在，我们已经成功地在父表格的第一行中插入了一个子表格行。

3. 创建子表格

在子表格行中，我们需要创建一个新的表格并设置其样式。我们可以使用CSS的类选择器来为子表格添加样式。我们给子表格的每一个单元格都添加了类，以便进行进一步的样式化。以下是一个示例子表格的HTML代码：

<td class="nested-row">张三
  <table class="nested-table">
    <tr>
      <th>课程</th>
      <th>分数</th>
    </tr>
    <tr>
      <td>数学</td>
      <td>90</td>
    </tr>
    <tr>
      <td>英语</td>
      <td>85</td>
    </tr>
  </table>
</td>

现在，我们可以使用CSS来为子表格添加样式。以下是一个简单的示例：

table.nested-table {
  border-collapse: collapse;
  margin-top: 5px;
}

table.nested-table th, table.nested-table td {
  border: 1px solid black;
  padding: 5px;
}

table.nested-table th {
  background-color: #ccc;
}

table.nested-table td {
  background-color: #f1f1f1;
}

通过上述CSS样式，我们可以给子表格的表头和单元格添加边框和背景色，使其更容易辨认。

4. 嵌套多个子表格行

要嵌套多个子表格行，我们只需要按照上述步骤在父表格中的其他单元格中插入新的子表格行。以下是一个嵌套两个子表格行的例子：

<td class="nested-row">张三
  <table class="nested-table">
    <tr>
      <th>课程</th>
      <th>分数</th>
    </tr>
    <tr>
      <td>数学</td>
      <td>90</td>
    </tr>
    <tr>
      <td>英语</td>
      <td>85</td>
    </tr>
  </table>
</td>
<td class="nested-row">李四
  <table class="nested-table">
    <tr>
      <th>课程</th>
      <th>分数</th>
    </tr>
    <tr>
      <td>数学</td>
      <td>95</td>
    </tr>
    <tr>
      <td>英语</td>
      <td>92</td>
    </tr>
  </table>
</td>

通过重复上述步骤，我们可以在父表格中的多个单元格中插入不同的子表格行，从而创建出更复杂的嵌套结构。