最后一个<tr>不在单独的行上。它与我使用 colspan 和 rowspan 的倒数第二行平行出现

Question

我有一个表，其中第一列跨越 8 行，而其他列与之平行。倒数第二行应与其平行，同时跨越 3 行和 3 列。最后一行应该在单独的行上，第一列占 1 列，第二列占 3 列。

我想要这个

这是我的代码

    <table class="table discovery mb-0 ">
        <thead>
            <tr>
                <th class="w-25">Discovery URL</th>
                <th>Issue type</th>
                <th>Plugin Id</th>
                <th>Severity</th>
            </tr>
        </thead>
        <tbody>
            <tr class="discoveryurl">
                <td class="text-start br-b0" rowspan="8">
                    opc.tcp://echo:53530/OPCUA/SimulationServer
                </td>
                <td class="text-start">
                    Anonymous authentication enabled
                </td>
                <td><a href="#" target="_blank">10001</a></td>
                <td>
                    <div class="row">
                        <div class="col pe-0 text-start">High (7,3)</div>
                        <div class="col">
                            <div class="results high">
                                <span class="active"></span>
                                <span class="active"></span>
                                <span class="active"></span>
                                <span class="active"></span>
                                <span></span>
                            </div>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="text-start">Message Security Mode None</td>
                <td><a href="#" target=" _blank ">10006</a></td>
                <td>
                    <div class="row">
                        <div class="col pe-0 text-start">Medium (6,5)</div>
                        <div class="col">
                            <div class="results medium">
                                <span class="active"></span>
                                <span class="active"></span>
                                <span class="active"></span>
                                <span class="active"></span>
                                <span></span>
                            </div>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="text-start">Security Policy None</td>
                <td><a href="#" target=" _blank ">10009</a></td>
                <td>
                    <div class="row">
                        <div class="col pe-0 text-start">Medium (5,4)</div>
                        <div class="col">
                            <div class="results medium">
                                <span class="active"></span>
                                <span class="active"></span>
                                <span class="active"></span>
                                <span class="active"></span>
                                <span></span>
                            </div>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="text-start">Self-signed client application certificates trusted</td>
                <td><a href="#" _blank ">10010</a></td>
                <td>
                    <div class="row">
                        <div class="col pe-0 text-start">Medium (5,4)</div>
                        <div class="col">
                            <div class="results medium">
                                <span class="active"></span>
                                <span class="active"></span>
                                <span class="active"></span>
                                <span class="active"></span>
                                <span></span>
                            </div>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="text-start">Auditing disabled</td>
                <td><a href="#" target=" _blank ">10002</a></td>
                <td>
                    <div class="row">
                        <div class="col pe-0 text-start">Medium (5)</div>
                        <div class="col">
                            <div class="results medium">
                                <span class="active"></span>
                                <span class="active"></span>
                                <span class="active"></span>
                                <span class="active"></span>
                                <span></span>
                            </div>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="text-start subs" colspan="3" rowspan="3">Hiding 3 random issues.
                    <a href="#">subscribe</a> to view all.
                </td>
            </tr>
            <tr class="last-row">
                <td class="text-start br-rb">
                    opc
                </td>
                <td class="text-start" colspan="3">
                    <ul class="error">
                        <li>
                            Https 
                        </li>
                    </ul>
                </td>
            </tr>
        </tbody>
    </table>

这就是结果

Answer 1

您的第一个

<td>

的行跨度为 8，但我只数到您的

<tr>

中有 7 个

<tbody>

。

较大的表可能会因多个列和行跨度而变得棘手。您可以在纸上绘制表格，然后对要连接的单元格进行编号。也许这有助于可视化并确定列跨度和行跨度的正确值。

编码快乐！

Answer 2

我们需要注意一些事情

表中的行数没有第一项跨越 8 的行数那么多。

没有“正常”行高度的概念 - 至少对于习惯于宽屏幕并且每个条目仅看到一行文本的我们来说可能是这样（但是在狭窄的视口上会发生什么？）。我们需要告诉系统行的高度是多少。在这个设置中，“正常”是内容需要的任何内容（可能还加上一点填充。）

此代码片段进行了更改，因此之前指定占用 3 行的单元格占用了 1 行，但通过额外的填充使其比其他行更高。原来占据 8 行的单元格现在只占据 6 行。

事物将会调整以适应更窄的视口/表格。

nt this enter image description here This is my code


<table class="table discovery mb-0 ">
  <thead>
    <tr>
      <th class="w-25">Discovery URL</th>
      <th>Issue type</th>
      <th>Plugin Id</th>
      <th>Severity</th>
    </tr>
  </thead>
  <tbody>
    <tr class="discoveryurl">
      <td class="text-start br-b0" rowspan="6">
        opc.tcp://echo:53530/OPCUA/SimulationServer
      </td>
      <td class="text-start">
        Anonymous authentication enabled
      </td>
      <td><a href="#" target="_blank">10001</a></td>
      <td>
        <div class="row">
          <div class="col pe-0 text-start">High (7,3)</div>
          <div class="col">
            <div class="results high">
              <span class="active"></span>
              <span class="active"></span>
              <span class="active"></span>
              <span class="active"></span>
              <span></span>
            </div>
          </div>
        </div>
      </td>
    </tr>
    <tr>
      <td class="text-start">Message Security Mode None</td>
      <td><a href="#" target=" _blank ">10006</a></td>
      <td>
        <div class="row">
          <div class="col pe-0 text-start">Medium (6,5)</div>
          <div class="col">
            <div class="results medium">
              <span class="active"></span>
              <span class="active"></span>
              <span class="active"></span>
              <span class="active"></span>
              <span></span>
            </div>
          </div>
        </div>
      </td>
    </tr>
    <tr>
      <td class="text-start">Security Policy None</td>
      <td><a href="#" target=" _blank ">10009</a></td>
      <td>
        <div class="row">
          <div class="col pe-0 text-start">Medium (5,4)</div>
          <div class="col">
            <div class="results medium">
              <span class="active"></span>
              <span class="active"></span>
              <span class="active"></span>
              <span class="active"></span>
              <span></span>
            </div>
          </div>
        </div>
      </td>
    </tr>
    <tr>
      <td class="text-start">Self-signed client application certificates trusted</td>
      <td>
        <a href="#" _blank ">10010</a></td>
                <td>
                    <div class="row ">
                        <div class="col pe-0 text-start ">Medium (5,4)</div>
                        <div class="col ">
                            <div class="results medium ">
                                <span class="active "></span>
                                <span class="active "></span>
                                <span class="active "></span>
                                <span class="active "></span>
                                <span></span>
                            </div>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="text-start ">Auditing disabled</td>
                <td><a href="# " target=" _blank ">10002</a></td>
                <td>
                    <div class="row ">
                        <div class="col pe-0 text-start ">Medium (5)</div>
                        <div class="col ">
                            <div class="results medium ">
                                <span class="active "></span>
                                <span class="active "></span>
                                <span class="active "></span>
                                <span class="active "></span>
                                <span></span>
                            </div>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="text-start subs " colspan="3 " rrowspan="1 " style="padding: 20px 0 20px 0; background-color: pink; ">Hiding 3 random issues.
                    <a href="# ">subscribe</a> to view all.
                </td>
            </tr>
            <tr rclass="last-row ">
                <td rclass="text-start br-rb ">
                    opc
                </td>
                <td rclass="text-start " rcolspan="3 ">
                    <ul rclass="error ">
                        <li>
                            Https 
                        </li>
                    </ul>
                </td>
            </tr>
        </tbody>
    </table>