表格内每个 tbody 的竖线答案

【问题标题】：Vertical bar for each tbody inside a table表格内每个 tbody 的竖线
【发布时间】：2018-03-17 05:57:28
【问题描述】：

我有一个动态 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>

【问题讨论】：

请粘贴您尝试过的CSS。？

标签： html css html-table pseudo-element

【解决方案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>

【讨论】：

【解决方案2】：

尝试给:first-child td 一个border-right。如果您要使用多列而不是 2 列，请尝试使用 :not(:last-child) 而不是 :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>

【讨论】：

这也是我的第一个想法，但如果你将它与设计进行比较，我正在寻找一条统一的单一垂直线。
我在table 选择器中添加了一个css 规则，它是border-collapse: collapse;。这使得线条均匀。
谢谢，但还是不符合设计。我的意思是为每个 tbody 元素设置一个垂直条。但是，目前我们为所有人提供了一个。