A vertical bar to separate each tbody section within a table

Having a dynamic HTML page with a table containing multiple 'tbody' elements, I am currently facing a CSS challenge. My goal is to display a vertical bar inside each of the 'tbody' sections as illustrated in the attached image.

I have attempted using 'tr::after' and creating a bar, but unfortunately, it did not work as expected.

Below is my current HTML structure:

I would greatly appreciate any assistance in achieving this visual effect.

<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://i.sstatic.net/cYd9d.png

htmlcsshtml-tablepseudo-element

Answer №1

Aside from @connor Here is the solution:

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>

Answer №2

To add a border to the first column in a table, you can use the :first-child selector on the td element. If you have multiple columns and want to apply the border to all except the last one, you can use the :not(:last-child) selector instead 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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for adjusting the default selection in a second dropdown menu

I have a dilemma with my two dropdown lists, "optionone" and "optiontwo". I am trying to alter the default selected value from "option value=3>3" to option value=3 selected>3 when the user selects 2 from the first dropdown list ("optionone"). <sc ...

javascriptjqueryhtmlajaxforms

What is the method for uncovering classes that do not have any associated CSS selectors?

Take a look at this snippet of HTML code: <style type="text/css"> .existing-class { background-color: #000; } </style> <div class="existing-class non-existing-class"></div> Within this code, there are two classes applied to the ...

htmlcss

I'm having trouble getting the height of my div element to render in percentage (%) in the CSS. Can anyone assist me with this issue?

When I try to set the "height" CSS property in percentage (%) for a div element, the HTML doesn't render anything. However, if I set the "height" CSS property using length values such as px or cm, it works perfectly fine. Can anyone provide assistance ...

htmlcss

Why doesn't "align-self: flex-end" relocate the game board to the bottom of the screen?

Hey there, I am currently working on developing a Connect 4 game and have decided to use a table for the board. To position the board properly, I am utilizing flexbox. Although I have specified align-items as 'flex-end' in order to bring it to th ...

cssflexbox

Attempted to remove Child Div using Jquery, but it did not get removed as expected

Trying to remove child divs inside a parent div? There are several methods, such as: $(".ChildDiv").html(""); $('.ChildDiv > div').remove(); $(".ChildDiv").html(""); $("#ParentDiv").html(""); $(".ChildDiv div").remove(); $(".ChildDiv di ...

javascriptjqueryhtmlcssasp.net

What are the steps to change table characteristics?

I currently have this segment of HTML code: <table cellspacing="0" cellpadding="0" width="100%"> After validating my HTML document, I discovered that these attributes are outdated. However, removing them would affect the alignment of my website. I ...

htmlcssw3c-validation

Is there a way to send decimal values from a view to a controller using Vue.js?

I am encountering an issue when trying to pass decimal values from the view to the controller using Vue.js. Only decimal values seem to be arriving as NULL, while integer or string values work fine. Below is the code snippet: salvarProdutos: function ( ...

htmlasp.net-mvcvue.js

Implementing HTML page authentication with Identity ADFS URL through JavaScript

I have a basic HTML page that displays customer reports using a JavaScript function. The JavaScript makes an ajax call to retrieve the reports from a backend Spring REST API. In the Spring REST API, I have set up an endpoint "/api/saml" for authentication ...

javascripthtmljqueryjquery-pluginsadfs

How can one use Selenium to verify the existence of an element on a webpage?

Currently, I am developing a program in Selenium with Python and facing an issue. During the test execution, there is a possibility that a button may or may not appear on the webpage based on an unknown parameter. The relevant HTML tag for this button is ...

pythonhtmlselenium-webdriver

Problem with bootstrap row height being set to 100%

I am currently immersed in a project utilizing the Twitter Bootstrap 3 framework. Here is the basic structure of my HTML layout: Sidebar Main content The sidebar element has a height set to 100% and a float: left property so that the div with the class ...

htmlcsstwitter-bootstrap

Having trouble getting the div to center using margin: auto?

I have a fixed div that spans 100% of the screen width, with another div inside it that has a set width in pixels. Despite having a width: auto, it seems to be aligned to the left: http://jsfiddle.net/jv87N I am puzzled as to why margin: 0px auto; is not ...

htmlcssweb

Set a background image URL for a specific division inside a template

I have a drawPlaceDetails function that populates an HTML template with values. The getPhotoURL() function retrieves a URL link to an image, which I am trying to assign to the background-image property. However, the div remains empty without displaying the ...

javascriptjqueryhtmlcss

Ensure that the placeholder remains visible as you type in the input field

Is there a way to implement an input text field in React with the placeholder "DD-MM-YYYY," that partially disappears as I start typing? For example, when I type "02-," only "-MM-YYYY" should remain visible as part of the placeholder. ...

javascripthtmlcssreactjsmaterial-ui

Utilizing the transform: origin property to perfectly align an element

I've tilted a basic paragraph and I'm attempting to position it on the left side of the browser at 0% from the top of the browser at 50%. http://example.com p { position: fixed; -webkit-transform-origin: left center; -webkit-transfo ...

htmlcss

The cursor in a contenteditable element fails to return to its original position after adding a new line and then deleting it

I have come across a basic HTML code snippet: span { outline: none; } hello <span contenteditable="true"> world </span> Upon testing, I observed that each time I press ENTER within the contenteditable span, the cursor moves to a new ...

htmlcontenteditable

Effect triggered upon scrolling to the top or bottom of the page

Would greatly appreciate your help in identifying errors in my script. Can someone point out where I might be going wrong? I am using two plugins - the first for custom scrollbar changes, and the second which I have cut and pasted into the first call. Bel ...

javascriptjquerycssscrollbars

Comparing `$('p:first');` with `document.querySelector('p');`

I am confused. $("p:first") chooses the initial p element. It is similar to document.querySelector("p"); Why do we need to use both methods? Apologies if this question seems silly, but I want to fully understand. UPDATE In what scen ...

jqueryhtmldom

I need to verify that the input type for time is valid, starting from today's date and extending beyond the current

<input type="date" onChange={(e)=>setDate(e.target.value)}/> <input type="time" onChange={(e)=>setTime(e.target.value)} /> If the selected date is after today and the time is after the current time, display a valida ...

javascripthtmlcssreactjstypescript

Unable to input Email ID and Password within a Selenium Java script for a Bootstrap dropdown menu on the website "https://qa01.pdng.pepsico.com/" without using a frame

To place your Email ID and Password into the appropriate input fields with IDs j_username and j_password, refer to the following HTML code snippet. There are no frames within this code preventing its utilization. ul class="nav__links nav__links--shop_in ...

htmlselenium

Error message displaying NaN and issues with setting class using color function in console log

The console log is displaying NaN for any variable I input. Additionally, the color function is not correctly changing classes, likely due to the number issue. I still need to address local storage, but my main focus is on getting the variable to display ...

javascripthtmlcsstwitter-bootstrap