Problem arises with table nth-child selector following the addition of grid-gap

Our current table looks like this: https://i.sstatic.net/eUyBB.png

The first row has a background color and the second row is white - which is correct.

Now I would like to align the attributes to the right. I added the following code to the table:

.table-wrapper tbody {
    font-size: 1.5rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 0 24px;
}

The current result looks like this: https://i.sstatic.net/YuYcb.png

But there is an issue. I need the result to look something like this: https://i.sstatic.net/J8eVD.png

Can someone help me fix our code?

$(document).ready(function()
{
  $("tr:odd").css({
    "background-color":"#000",
    "color":"black"});
});
.additional-attributes tr th {
    border-right: 0px solid #ccc;
    font-weight: 200;
    width: 0%;
}
additional-attributes tbody tr {
    border-bottom: 0px solid #ccc !important;
    border-bottom: none !important;
}
additional-attributes tr {
    border-bottom: 0px solid #ccc !important;
}
.table-wrapper {
    float: left;
    margin-top: 10px;
}
.additional-attributes tr td {
    font-weight: 500;
    padding: 10px 10px;
}
tbody tr:nth-child(odd){
  background-color: #f8fafb;
  color: black;
}
.table-wrapper tbody {
    font-size: 1.5rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 0 24px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="additional-attributes-wrapper table-wrapper">
        <table class="data table additional-attributes" id="product-attribute-specs-table">
            <tbody>
                <tr>
                    <th class="label" scope="row">Parametr</th>
                    <td class="data">first</td>
                </tr>
                                <tr>
                    <th class="label" scope="row">Parametr</th>
                    <td class="data">first</td>
                </tr>
                                <tr>
                    <th class="label" scope="row">Parametr</th>
                    <td class="data">first</td>
                </tr>
                                <tr>
                    <th class="label" scope="row">Parametr</th>
                    <td class="data">first</td>
                </tr>
                                <tr>
                    <th class="label" scope="row">Parametr</th>
                    <td class="data">first</td>
                </tr>
                                <tr>
                    <th class="label" scope="row">Parametr</th>
                    <td class="data">first</td>
                </tr>
                                <tr>
                    <th class="label" scope="row">Parametr</th>
                    <td class="data">first</td>
                </tr>
                                <tr>
                    <th class="label" scope="row">Parametr</th>
                    <td class="data">first</td>
                </tr>
                                <tr>
                    <th class="label" scope="row">Parametr</th>
                    <td class="data">first</td>
                </tr>
                
            </tbody>
        </table>
    </div>

Updated code:

<style>
.seller-attributes {
    box-sizing: border-box;
    height: auto;
    padding: 15px;
}
.additional-attributes tr th {
    border-right: 0px solid #ccc;
    font-weight: 200;
    width: 0%;
}
additional-attributes tbody tr {
    border-bottom: 0px solid #ccc !important;
    border-bottom: none !important;
}
additional-attributes tr {
    border-bottom: 0px solid #ccc !important;
}
.table-wrapper {
    float: left;
    margin-top: 10px;
}
.additional-attributes tr td {
    font-weight: 500;
    padding: 10px 10px;
}
tbody tr:nth-child(odd){
  background-color: #f8fafb;
  color: black;
}

/* ADDED */
tbody tr:nth-of-type(4n + 3), tbody tr:nth-of-type(4n){
  background-color: white;
}
tbody tr:(even){
  padding-left: 24px;
}
.additional-attributes tbody tr {
        display: grid;
    grid-template-columns: 2fr 1fr;
}
.additional-attributes tr th {
    width: 100%
}
</style>
javascripthtmlcss

Answer №1

Make sure to include this CSS code for the correct background display without needing jQuery:

/* ADDED */
tbody tr:nth-of-type(4n + 3), tbody tr:nth-of-type(4n){
  background-color: salmon;
}
tbody tr:nth-of-type(4n - 3), tbody tr:nth-of-type(4n -2){
  background-color: grey;
}
tbody tr:(even){
  padding-left: 24px;
}
.additional-attributes tbody tr{
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
}
.additional-attributes tr th{
  width: 100%;
  text-align:right;
}
.additional-attributes tr td{
  text-align:left;
}

DEMO:

/*$(document).ready(function()
{
  $("tr:odd").css({
    "background-color":"#000",
    "color":"black"});
});*/
.additional-attributes tr th {
    border-right: 0px solid #ccc;
    font-weight: 200;
    width: 0%;
}
.additional-attributes tbody tr {
    border-bottom: 0px solid #ccc !important;
    border-bottom: none !important;
}
.additional-attributes tr {
    border-bottom: 0px solid #ccc !important;
}
.table-wrapper {
    float: left;
    margin-top: 10px;
}
.additional-attributes tr td {
  font-weight: 500;
    padding: 0 10px; 
}
tbody tr:nth-child(odd){
  background-color: #f8fafb;
  color: black;
  margin-right: 5px;
}
.table-wrapper tbody {
    font-size: 1.5rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    /*grid-gap: 0 24px;*/
}
/* ADDED */
tbody tr:nth-of-type(4n + 3), tbody tr:nth-of-type(4n){
  background-color: salmon;
}
tbody tr:nth-of-type(4n - 3), tbody tr:nth-of-type(4n -2){
  background-color: grey;
}
tbody tr:nth-child(even){
  padding-left: 24px;
  margin-left: 5px;
}
.additional-attributes tbody tr{
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
}
.additional-attributes tr th{
  width: 100%;
  text-align:right;
}
.additional-attributes tr td{
  text-align:left;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="additional-attributes-wrapper table-wrapper">
        <table class="data table additional-attributes" id="product-attribute-specs-table">
            <tbody>
                <tr>
                    <th class="label" scope="row">Parametr I am longer</th>
                    <td class="data">first I am longer</td>
                </tr>
                                <tr>
                    <th class="label" scope="row">Parametr</th>
                    <td class="data">first</td>
                </tr>
                                <tr>
                    <th class="label" scope="row">Parametr</th>
                    <td class="data">first</td>
                </tr>
                                <tr>
                    <th class="label" scope="row">Parametr</th>
                    <td class="data">first</td>
                </tr>
                                <tr>
                    <th class="label" scope="row">Parametr</th>
                    <td class="data">first</td>
                </tr>
                                <tr>
                    <th class="label" scope="row">Parametr</th>
                    <td class="data">first</td>
                </tr>
                                <tr>
                    <th class="label" scope="row">Parametr</th>
                    <td class="data">first</td>
                </tr>
                                <tr>
                    <th class="label" scope="row">Parametr</th>
                    <td class="data">first</td>
                </tr>
                                <tr>
                    <th class="label" scope="row">Parametr</th>
                    <td class="data">first</td>
                </tr>
                
            </tbody>
        </table>
    </div>

Answer №2

If you wish to split the tr elements into two parts, it is advisable to divide them accordingly.

To achieve this division, I have included two tbody sections within the table structure. The selector for the table wrapper has been updated from .table-wrapper tbody to simply .table-wrapper, allowing each tbody to define a separate part of the content.

Organizing your code into distinct sections enhances readability and minimizes potential conflicts between different elements.

Introducing the style rule grid-template-columns: 1fr 1fr; to the tbody element helps prevent the styles of trs from bleeding over to other sections of the layout.

While using the odd or even selectors on tr elements can also provide a way to distinguish between the two parts, remember that explicitly specifying odd effectively divides the tr into its two respective parts.

The application of grid-template-columns: 1fr 1fr; should similarly result in the division of trs into two distinct sections.

These adjustments help maintain order within the structure.

$(document).ready(function()
{
  $("tr:odd").css({"background-color":"#000","color":"black"});
});
.additional-attributes tr th {
    border-right: 0px solid #ccc;
    font-weight: 200;
    width: 0%;
}

additional-attributes tbody tr {
    border-bottom: 0px solid #ccc !important;
    border-bottom: none !important;
}

additional-attributes tr {
    border-bottom: 0px solid #ccc !important;
}

.table-wrapper {
    float: left;
    margin-top: 10px;
}

.additional-attributes tr td {
    font-weight: 500;
    padding: 10px 10px;
}

tbody tr:nth-child(odd) {
    background-color: #f8fafb;
    color: black;
}

.table-wrapper table {
    font-size: 1.5rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 0 24px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="additional-attributes-wrapper table-wrapper">
    <table class="data table additional-attributes" id="product-attribute-specs-table">
        <tbody>
            <tr>
                <th class="label" scope="row">Parametr</th>
                <td class="data">first</td>
            </tr>
            <tr>
                <th class="label" scope="row">Parametr</th>
                <td class="data">first</td>
            </tr>
            <tr>
                <th class="label" scope="row">Parametr</th>
                <td class="data">first</td>
            </tr>
            <tr>
                <th class="label" scope="row">Parametr</th>
                <td class="data">first</td>
            </tr>

            <tr>
                <th class="label" scope="row">Parametr</th>
                <td class="data">first</td>
            </tr>
        </tbody>
        <tbody>
            <tr>
                <th class="label" scope="row">Parametr</th>
                <td class="data">first</td>
            </tr>
            <tr>
                <th class="label" scope="row">Parametr</th>
                <td class="data">first</td>
            </tr>
            <tr>
                <th class="label" scope="row">Parametr</th>
                <td class="data">first</td>
            </tr>
            <tr>
                <th class="label" scope="row">Parametr</th>
                <td class="data">first</td>
            </tr>

        </tbody>
    </table>
</div>

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

Ajax encounters difficulty in parsing JSON data

I have thoroughly researched similar questions on this topic, but none of them have provided a solution to my problem. My current challenge involves parsing JSON data that is being returned from a PHP script running on the server. I have already used JSON ...

javascriptjqueryajaxjson

Using Ajax to implement Basic Authentication for securely accessing an https-protected webpage without requiring users to manually enter their username and password in a

Is there a way to access and display a website page hosted at this URL - , without encountering any authentication dialog box from my application on the same network? I have been unable to bypass the username and password entry request. I successfully imp ...

javascripthtmlajax

Using Angular and ASP.NET for image uploading functionality

Trying to source the image from the PC and upload it into the database as "Images/aaa.jpg". I am relatively new to Angular and have attempted an example that did not work for me. I have been stuck on this issue for almost 3 days trying to find a solution. ...

c#htmlasp.netangularjs

Firebase 9 - Creating a New Document Reference

Hey everyone, I need some help converting this code to modular firebase 9: fb8: const userRef = db.collection('Users').doc(); to fb9: const userRef = doc(db, 'Users'); But when I try to do that, I keep getting this error message: Fir ...

javascriptfirebasegoogle-cloud-firestorenext.js

Create a new object in Three.js every x seconds and continuously move each object forward in the Z-axis direction

I am currently developing a Three.js endless runner game where the player controls a character dodging cars on a moving road. At this early stage of development, my main challenge is to make the hero character appear to be moving forward while creating the ...

javascriptthree.js

achieving bidirectional binding within a directive without using an isolated scope

One of my directives is set up like this: angular.module('somemodule').directive('tooltipText', function ($timeout, $compile, $document, config, $filter) { return { restrict: 'A', scope:{ tooltip: '=&ap ...

javascriptangularjs

Guide on how to use JavaScript to upload media stream recorder blobs onto YouTube using the YouTube API

Using mediastreamrecorder.js, I am successfully recording video in 5-second blobs within the ondataavailable function. Here is an example of the code: mediaRecorder.ondataavailable = function(blob) { blob=blob; }; While I am a ...

jqueryhtmlfile-uploadwebrtcyoutube-javascript-api

Achieving synchronization within the 'it' block using Protractor

I am currently experiencing synchronization issues in the 'it' block of my code. The following snippet illustrates the problem: it('Some Download Operation',function() { console.log("before"); myobj.clickOnDownloadBtn(); ...

javascriptangularjsprotractor

Unraveling the complexities of parsing multi-tiered JSON structures

I am struggling with indexing values from a multi-level JSON array. Here is the JSON data in question: { "items": [ { "snippet": { "title": "YouTube Developers Live: Embedded Web Player Customization" } ...

javascriptjson

jquery line break in textarea

There is a 'edit description' button that, when clicked, makes text disappear and reappear if (id == 'commedit') jQuery(this).html('<textarea>'+jQuery(this).text()+'</textarea>'); else i ...

javascriptjqueryjquery-ui

The functionality of json_encode seems to vary when applied to different PHP arrays, as it successfully encodes data for

My current challenge involves importing three arrays from PHP into JS using json_encode. Below is the code snippet I am currently working on: <?php $query2 = "SELECT * FROM all_data"; $result2 = $conn->query($query2); $bu = []; ...

javascriptphpmysqljsonmariadb

Having trouble with sending a POST request to a URL?

I'm attempting to communicate with an API by including the parameters in the URL. I am uncertain whether it will return XML or JSON, but it will be one of the two. Unfortunately, I keep encountering an error message. Here's an example of my requ ...

htmlapiurlposterror-handling

When hovered over, the submenu quickly adjusts its size within 0.1 seconds

Whenever you hover over the Galerija, a submenu pops up. However, there seems to be an issue where the right side of the submenu twitches or resizes for about 0.1 seconds initially. If anyone has any insight on this problem, I would greatly appreciate it. ...

htmlcsswordpress-theming

Adaptable Bootstrap Button that Adjusts to Different Screen Sizes

I want this button to adjust its size according to the screen dimensions. The current code keeps the button fixed in place. See below for the code snippet. <button type="button" [className]="'btn btn-block m-0'" kendoButton ...

cssangularresponsive-designbootstrap-5

Load data onto a dropdown menu using Ajax requests

My view currently includes a dropdown menu. Upon selecting an item from the dropdown, AJAX is supposed to load. The table 'locations' has a one-to-many relationship with 'contacts.' When I select a location from the locations dropdown, ...

javascriptphpajaxlaravel-5

Invoke a C# function (returning a string) within ASP.NET to set the source attribute for an HTML element

I have developed some C# Methods that return a string output, such as "C:/tracks/audio1.mp3", and I want to use this as a reference for my ASP.NET project. Now, I am trying to incorporate my method "GetTrackPath()" into the HTML audio tag so that the meth ...

javascriptc#htmlasp.netrazor

Obtaining the distinct identifier of a MongoDB document during insertion

I am currently developing a NodeJS express application with MongoDB (using Mongojs) and I am facing some challenges in achieving a specific task. My issue is related to inserting an object into a collection and then obtaining the unique identifier of this ...

javascriptnode.jsmongodbexpressmongojs

Steps to handle the change event of a p:inputText element

In my current setup, I am utilizing p:inputText and have the need to trigger a javascript function that will update the searchField in the backend bean. <p:inputText required="true" placeholder="#{cc.attrs.searchTip}" value="#{cc.attrs.queryProperty}" ...

javascriptjqueryhtmlprimefaces

Python: Utilizing HTML User Input to Search Database

I am currently working on a project that involves searching a database using HTML. Here is the code snippet I am using: <form action="/question/search" method="POST"> <input id="search" type="text" placeholder="Search.." name="s ...

pythonhtmlsqlpostgresqlpsycopg2

I currently have some code for a toggle button and a collapse feature, but I'm struggling to integrate the two

I need assistance with implementing a toggle animation I found here: https://codepen.io/7harrypotterrr/pen/OrBwPY. I'm unsure how to apply it to my code and replace the current toggle button that is in use here: https://codepen.io/7harrypotterrr/pen/e ...

htmlcss