HTML Bootstrap表的复杂结构答案

【问题标题】：Complex structure of HTML Bootstrap tableHTML Bootstrap表的复杂结构
【发布时间】：2020-05-21 01:13:11
【问题描述】：

我想用 BOOTSTRAP 创建一个复杂的表结构，但我没有找到解决方案。

有人有解决方案/HTML 结构可以提供给我吗？（在屏幕截图中，我要创建的结构）:)

谢谢，

（我使用的是Bootstrap v3.3.6版本）

Clicking here to see the image of the table wanted

【问题讨论】：

如果不提供您尝试过的内容，您可能不会得到任何答案，因为无论有没有引导程序，它都绝对简单可行
研究colspan和rowspan。
请提出一个具体问题，并提供一个您已经尝试过的示例。如果您只是在寻找示例，请先进行自己的研究。如果您找不到与您的问题相匹配的示例，请提出一个准确的问题，您找到的示例缺少什么。
或者去使用构建工具...buildbootstrap.com

标签： html bootstrap-4

【解决方案1】：

您可以使用Bootstrap 类名作为colspan 和rowspan 来实现您想要的表格结果。我看到了你的截图，也许这就是你想要的输出？

这是colspan 和rowspan 的完整Youtube tutorial

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    tr {
      border: teal 5px solid;
    }

    td {
      border: turquoise 5px solid;
    }

    td {
      border: tomato 5px solid;
    }
  </style>
</head>

<body>
  <table class="table" style="text-align: center;">
    <tr>
      <th colspan="3">Title-1</th>
      <th colspan="2">Title-2</th>
      <th>Title-3</th>
    </tr>
    <tr>
      <td colspan="3" rowspan="2">Row 1</td>
      <td colspan="2">Row 1-1</td>
      <td>Row 1-1</td>
    </tr>
    <tr>
      <td>Row 1-2</td>
      <td>Row 1-2</td>
      <td>Row 1-2</td>
    </tr>
    <tr>
      <td colspan="3" rowspan="3">Row 2</td>
      <td>Row 2-1</td>
      <td>Row 2-1</td>
      <td>Row 2-1</td>
    </tr>
    <tr>
      <td colspan="2">Row 2-2</td>
      <td>Row 2-2</td>
    </tr>
  </table>
</body>

</html>

【讨论】：