Vertical bar for each tbody inside a table

问题

I've a dynamic HTML page which has a table with multiple 'tbody' elements. Now, I'm stuck with CSS as I need to show a vertical bar inside each of the 'tbody' as shown in the image attached.

How could I get this done? I tried using 'tr::after' and creating a bar, but didn't help.

Here's my html:

Could you please help me achieve this?

<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>

回答1:

In addition to @connor This does the trick:

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>

回答2:

Try giving the :first-child td a border-right. If you're gonna have multiple columns, in stead of 2, try using :not(:last-child) in stead of :first-child.

<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>

来源：https://stackoverflow.com/questions/49322433/vertical-bar-for-each-tbody-inside-a-table

标签

html

css

html-table

pseudo-element