表格内的表格 HTML答案

【问题标题】：Table inside a table HTML表格内的表格 HTML
【发布时间】：2018-06-21 04:50:08
【问题描述】：

我的 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>

【问题讨论】：

w3schools.com/Tags/att_td_rowspan.asp
不起作用。当我在标签中添加 rowspan 时，它会生成 B，放在 A 旁边

标签： html html-table

【解决方案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>

【讨论】：