表格内的表格HTML

Question

我有我的HTML，其中的表格位于奇数两个字符内

我想要这个

但是我有这个

我该如何使用相同的表td？

这是我的HTML代码：

<table>
      <thead class='thead-dark'>
        <tr>
          <th>Semestre</th>
          <th>Curso</th>
          <th>Seccion</th>
        </tr>
      </thead>
      <tbody>
        {% for item in results%}

        <tr>
          <td>{{item.year}}</td>
          <td><table class="table table-striped table-hover">
            {% if item.A!= ""%}
              <tr><td><p>A.1</p></td></tr>
            {%endif%}
            {% if item.B != ""%}
            <tr><td><p>B.1</p></td></tr>
            {%endif%}
         </tr></table></td>
          <td><table>
            {% if item.A != ""%}
              <tr><td><p>{{item.A|linebreaks}}</p></td></tr>
            {%endif%}
            {% if item.B != ""%}
            <tr><td><p>{{item.B|linebreaks}}</p></td></tr>
            {%endif%}
            </tr></table></td>
          </tr>

      </tbody>
      </table>

Answer 1

您不必在其中嵌套第二张表。使用@Brian Tomspett建议的“ rowspan”可以解决问题。

table {
    border-collapse: collapse;
}
td, th {
    border: 1px solid black;
}

<table>
  <tbody>
    <tr>
      <td>Item1</td>
      <td>Item2</td>
      <td>Item3</td>
    </tr>
    <tr>
      <td rowspan="6">A</td>
      <td rowspan="2">A.1</td>
      <td>A.1.1</td>
    </tr>
    <tr>
      <td>A.1.2</td>
    </tr>
    <tr>
      <td rowspan="2">A.2</td>
      <td>A.2.1</td>
    </tr>
    <tr>
      <td>A.2.2</td>
    </tr>
    <tr>
      <td rowspan="2">A.2</td>
      <td>A.3.1</td>
    </tr>
    <tr>
      <td>A.3.2</td>
    </tr>
    <!--continue the pattern here-->
  </tbody>
</table>