html - 表格内每个 tbody 的垂直条

Question

我有一个动态 HTML 页面，其中有一个包含多个“tbody”元素的表格。 现在，我受困于 CSS，因为我需要在每个“tbody”内显示一个垂直条，如所附图片所示。

我怎样才能完成这件事？我尝试使用“tr::after”并创建一个栏，但没有帮助。

这是我的 html:

你能帮我实现这个吗？

<table>
  <tbody class="container">
    <tr>
     <td>Row 1 Column 1</td>
     <td>Row 1 Column 2</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>
      <td>Row 1 Column 1</td>
      <td>Row 1 Column 2</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>
      <td>Row 1 Column 1</td>
      <td>Row 1 Column 2</td>
    </tr>
    <tr>
      <td>Row 2 Column 1</td>
      <td>Row 2 Column 2</td>
    </tr>
    <tr>
      <td>Row 3</td>
    </tr>			
  </tbody>
</table>

Answer 1

除了@connor 这样做的诀窍:

tbody {
         margin: 10px;
         display: block;
        }

<style>
    table {
        border-collapse: collapse;
    }
    td:first-child {
        border-right: 1px solid #000;
    }
    tbody {
     margin: 10px;
     display: block;
    }
</style>
<table>
	<tbody class="container">
		<tr>
			<td>Row 1 Column 1</td>
			<td>Row 1 Column 2</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>
			<td>Row 1 Column 1</td>
			<td>Row 1 Column 2</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>
			<td>Row 1 Column 1</td>
			<td>Row 1 Column 2</td>
		</tr>
		<tr>
			<td>Row 2 Column 1</td>
			<td>Row 2 Column 2</td>
		</tr>
		<tr>
			<td>Row 3</td>
		</tr>
	</tbody>
</table>