表格中每个tbody的垂直条 [英] Vertical bar for each tbody inside a table

问题描述

我有一个动态的HTML页面，它有一个包含多个'tbody'元素的表格。
现在，我坚持使用CSS，因为我需要在每个'tbody'中显示一个垂直条，如图所示。

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

这是我的html：

您可以帮我实现这个目的吗？

< table> ; < tbody class =container> < TR> < td>第1行第1列< / td> < td>第1行第2列< / td> < / TR> < TR> < td>第2行第1列< / td> < td>第2行第2列< / td> < / TR> < TR> < td>第3行< / td> < / TR> < / tbody的> < tbody class =container> < TR> < td>第1行第1列< / td> < td>第1行第2列< / td> < / TR> < TR> < td>第2行第1列< / td> < td>第2行第2列< / td> < / TR> < TR> < td>第3行< / td> < / TR> < / tbody的> < tbody class =container> < TR> < td>第1行第1列< / td> < td>第1行第2列< / td> < / TR> < TR> < td>第2行第1列< / td> < td>第2行第2列< / td> < / TR> < TR> < td>第3行< / td> < / TR> < / tbody>< / table>

$ b

解决方案

除了@connor
这个技巧：

tbody {margin：10px;显示：块; }

 <风格> table {border-collapse：collapse; } td：first-child {border-right：1px solid＃000; } tbody {margin：10px;显示：块; }< /风格><表> < tbody class =container> < TR> < td>第1行第1列< / td> < td>第1行第2列< / td> < / TR> < TR> < td>第2行第1列< / td> < td>第2行第2列< / td> < / TR> < TR> < td>第3行< / td> < / TR> < / tbody的> < tbody class =container> < TR> < td>第1行第1列< / td> < td>第1行第2列< / td> < / TR> < TR> < td>第2行第1列< / td> < td>第2行第2列< / td> < / TR> < TR> < td>第3行< / td> < / TR> < / tbody的> < tbody class =container> < TR> < td>第1行第1列< / td> < td>第1行第2列< / td> < / TR> < TR> < td>第2行第1列< / td> < td>第2行第2列< / td> < / TR> < TR> < td>第3行< / td> < / TR> < / tbody>< / 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>

解决方案

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>

这篇关于表格中每个tbody的垂直条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！