复杂tbody的

Question

我是一个动态的HTML网页，其中包含一个包含多个＆＃39; tbody＆＃39;元素。 每个tbody元素都有点复杂，因为它有一个嵌套结构。

我需要在每个tbody中都有一条垂直线。 就此而言，我试图在＆＃39;之后使用伪元素。创建垂直线。但它似乎不起作用。

你可以帮我解决一下吗？

以下是样本设计：

我的代码：

＆＃13;

＆＃13;

.container tr:last-child::after {
  content: '';
  display: inline-block;
  height: 100%;
  border-left: 1px solid red;
  position: relative;
  border-left: 2px solid red;
  right: 10px;				
}

＆＃13;

<table>
  <tbody class="container">
    <tr>
      <th>
        <h3>Heading 1</h3>
        <div>Content</div>
      </th>
      <td>Row 1 Column 2</td>
      <td>Row 1 Column 3</td>
    </tr>
    <tr>
      <td>Row 2 Column 1</td>
      <td>Row 2 Column 2</td>
    </tr>
    <tr>
      <td>Row 3</td>
    </tr>
  </tbody>
  <tbody class="container">
    <tr>
      <th>
        <h3>Heading 2</h3>
        <div>Content</div>
      </th>
      <td>Row 1 Column 2</td>
      <td>Row 1 Column 3</td>
    </tr>
    <tr>
      <td>Row 2 Column 1</td>
      <td>Row 2 Column 2</td>
    </tr>
    <tr>
      <td>Row 3</td>
    </tr>
  </tbody>
  <tbody class="container">
    <tr>
      <th>
        <h3>Heading 1</h3>
        <div>Content</div>
      </th>
      <td>Row 1 Column 2</td>
      <td>Row 1 Column 3</td>
    </tr>
    <tr>
      <td>Row 2 Column 1</td>
      <td>Row 2 Column 2</td>
    </tr>
    <tr>
      <td>Row 3</td>
    </tr>
  </tbody>
</table>

＆＃13;

＆＃13;

＆＃13;