桌子内每个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

尝试给:first-child td一个border-right。如果您要拥有多个列，而不是2个，请尝试使用:not(:last-child)代替:first-child。

＆＃13;

＆＃13;

<style>
    table {
        border-collapse: collapse;
    }
    td:first-child {
        border-right: 1px solid #000;
    }
</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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

除了@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>