Place a two-column table within another column, but do so only after reaching a specific row within the data

I need to create a table with two columns of data, but I want to wrap it only after a specific row in the data set. For example, I may want to start wrapping from the middle or from a certain <tr>, like the one that contains <td>Here:</td>.

<table>
  <tbody>
    <tr>
      <td>A:</td>
      <td>B</td>
    </tr>
    <tr>
      <td>A:</td>
      <td>B</td>
    </tr>
    <tr>
      <td>A:</td>
      <td>B</td>
    </tr>
    <tr>
      <td>A:</td>
      <td>B</td>
    </tr>
    <tr>
      <td>A:</td>
      <td>B</td>
    </tr>
    <tr>
      <td>Here:</td>
      <td>B</td>
    </tr>
    <tr>
      <td>A:</td>
      <td>B</td>
    </tr>
    <tr>
      <td>A:</td>
      <td>B</td>
    </tr>
    <tr>
      <td>A:</td>
      <td>B</td>
    </tr>
    <tr>
      <td>A:</td>
      <td>B</td>
    </tr>
    <tr>
      <td>A:</td>
      <td>B</td>
    </tr>
    <tr>
      <td>A:</td>
      <td>B</td>
    </tr>
    <tr>
      <td>A:</td>
      <td>B</td>
    </tr>
  </tbody>
</table>

Can this be achieved with pure CSS or perhaps JS?

Answer №1

To reorganize the layout and distribute content into two columns, you can reset the display to grid and target the row containing "Here" for the second column placement.

Here is a potential example:

table {
  width: max-content;
}

table,
tbody,
tr {
  display: grid;
}

tbody,
tr {
  grid-template-columns: repeat(2, 1fr);
  grid-auto-flow: row dense;
}

tr {
  grid-column: 1;
}

tbody>tr:nth-child(5)~tr {
  grid-column: 2;
}

table,
td,
tbody:after {
  border: solid 1px;
  margin: 1px;
}

tbody:after {
  padding:0.15em;
  content: '?? a void to fill';
  grid-row: auto /span 10;
  background: #bad;
}
<table>
  <tbody>
    <tr>
      <td>A:</td>
      <td>B</td>
    </tr>
    <tr>
      <td>A:</td>
      <td>B</td>
    </tr>
    <tr>
      <td>A:</td>
      <td>B</td>
    </tr>
    <tr>
      <td>A:</td>
      <td>B</td>
    </tr>
    <tr>
      <td>A:</td>
      <td>B</td>
    </tr>
    <tr>
      <td>Here:</td>
      <td>B</td>
    </tr>
    <tr>
      <td>A:</td>
      <td>B</td>
    </tr>
    <td>A:</td>
    <td>B</td>
    <tr>
  </tbody>
</table>

Answer №2

If you're looking to split a column in a table, you can use this code snippet:
With <th>.......</th>

Your original code:

<tr>
   <td>Here:</td>
   <td>B</td>
</tr>

Updated code:

     <tr>
      <th scope="col" colspan="2">SPLITTER</th>
    </tr>

This will result in the following output when rendered in a table:

<table>
  <tbody>
    <tr>
      <td>A:</td>
      <td>B</td>
    </tr>
        <tr>
      <td>A:</td>
      <td>B</td>
    </tr>
        <tr>
      <td>A:</td>
      <td>B</td>
    </tr>
        <tr>
      <td>A:</td>
      <td>B</td>
    </tr>
        <tr>
      <td>A:</td>
      <td>B</td>
    </tr>
    <tr>
      <th scope="col" colspan="2">SPLITTER</th>
    </tr>
    <tr>
      <td>A:</td>
      <td>B</td>
    </tr>

    (Table continues with similar rows...)
  </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

php generate a new file within a specific folder

In the following code snippet, a check is performed for the existence of a directory named 'dat'. If the directory does not exist, it is created. This functionality works correctly; however, the goal is to write a file to this directory that can ...

Creating dynamic emails using ng-repeat data binding

I'm struggling to bind the newly added emails to $scope.emails as it does not contain the new email user added. Any suggestions on how to solve this issue? // On the server side, emails is a List and email is a string Initially, I tried binding with ...

Removing elements from an array based on a specified condition

I am having trouble deleting JSON elements that meet a certain condition. I tried using the following code: var index = -1; for (var i = 0; i < data.dashLayout.dashlets.length; i++) { if (data.dashLayout.dashlets[i].rowNo == selectedrowno) { if ( ...

Refine object array by applying multiple filters based on various values

Currently, I have an array of objects that I need to filter based on user input. For example, if a user enters "Red Shirt," I want to only return entries with values like {color: "red", clothingType: "shirt"} rather than {color: "red", clothingType: "scar ...

What could be causing my JQuery code to fail after loading data via ajax?

My tree view is set up using the following jQuery code: $(".treeView").on("click", ".CollOpen, .CollClosed", function () { $(this).toggleClass("CollOpen CollClosed").nextAll('ul').first().toggle(); }); Initially, this code works perfectly. ...

How to upload several files with identical file names using dropzone.js

I've been using dropzone.js with great success, but I ran into an issue when trying to upload multiple files with the same name. For example, uploading photos from an iOS device where they all have the name "image.jpg." While I can change the file nam ...

Enhancing security with Mongoose's bcrypt for asynchronous password setting and saving

I've defined a mongoose schema that includes a method to set a password using bcrypt: UserSchema.methods.setPassword = function (password) { bcrypt.hash(password, saltRounds).then(function (hash) { this.hash = hash; }); }; When creating a us ...

Tips for Sending <Div> Data to a Servlet

I attempted to pass the content of an entire div in a form action URL using JavaScript. However, when I try to retrieve this request parameter as a String on the servlet side, it is returning [object Object]. Below is my code for the form and JavaScript: ...

It appears that the anchors and fragment identifiers are not functioning as expected

On my page somepage.html, I have the following markup: <div class='someclass' id='hashtag1'> <h1>somecontent</h1> </div> <div class='someclass' id='hashtag2'> <h1>somecontent& ...

Interacting with a PHP script utilizing jQuery

After creating a jQuery function to submit data from a textarea, an unexpected error regarding 'recievedData' being undefined occurred. Despite using firebug to debug the script, a response was visible. Below is the jQuery function in question. ...

Error with displaying tooltip according to array identifier

I'm currently working on getting the "tooltip" to function in a specific way: My goal is for the "tooltip" text to display based on the id of the "element" that I have specified in my array when clicking on a "link" with X id. The issue I'm fac ...

Challenges arise when implementing bootstrap with a default font size of 10px as rem

In my current project, I've decided to integrate Bootstrap 4 and start using the 'rem' unit for lengths. Initially, I set 'rem = 10px' to simplify conversions from pixels. However, this caused a problem because Bootstrap now primar ...

Selenium: verifying the presence of specific text within an element

Is it possible to use Selenium IDE to verify if the inner text of an element includes a particular string? As an example: <p id="fred">abcde</p> 'id=fred' contains "bcd" = true) ...

Issue with ReactJS: onChange event does not function properly when value is changed using jQuery

This is the reactjs code I am working with: <input name="date" id="date" value={this.state.listManage.date} onChange={this.handleForm} type="text" /> When I manually type in the input field, the onChange function works ...

HTML Automated Email

I am currently working on developing a WIFI landing page that requires users to input their email address in a textbox. Upon clicking 'Connect', the entered email address will be sent to another designated email for review. While I have found co ...

Cypress - display of empty select element list when executed within viewport dimensions

I'm attempting to run the following code snippet: it('try select', () => { cy.visit('http://automationteststore.com/index.php?rt=account/create') cy.get('select:visible').eq(1).select(5, { force: true }) }) When I exe ...

Converting JSON data into a JavaScript array and retrieving the array through an AJAX request from PHP

Currently, I am working on a project where I have created a function named AjaxRequest to manage all my AJAX requests. While making the requests is not an issue, receiving and placing the data back onto the page has proven to be quite challenging. Within ...

Integrating the frontend (HTML, CSS, and JavaScript) with the backend (Express server)

I've been trying to figure out the best way to connect the frontend and backend of a website, but I can't seem to find any clear answers online. Let's say you have a backend API with an endpoint that deletes a user's account when req ...

Connection to external sources has been deactivated

I am experiencing an issue on my website at . When attempting to click on a link, it seems to be disabled. I suspect this is due to the presence of two images at the end of the navigation bar. Removing these images causes the navigation bar to fall apart, ...

How can the color of the wishlist icon be modified in Reactjs when the item is available in the database?

Is there a way to change the color of the wishlist icon based on whether the item is in the database? If the item is present, its color should be brown, and if it's not present, the color should be black. Additionally, I want the ability to toggle be ...