Exclude striped tr elements within a subtable

I have a main table (Maintable) containing information, with each row having a sub-table for additional details that can be collapsed if needed. I am trying to stripe the rows in the Main table but using `tr:nth-child(even)` is not working as it also affects the sub-table rows.

Is there a way to only apply the striping to the rows in the "Maintable" without affecting the sub-table rows? See example below:

<table class="maintable_use_for_striped">
  <tr>
    <td>Hr.</td>
    <td>Blub</td>
    <td><a role="button" class="btn btn-primary collapsed" data-toggle="collapse" href="#collapse_96" aria-expanded="false" aria-controls="collapseExample">mehr</a></td>
  </tr>
  <tr>
    <td colspan="11" class="collapseTd">
      <div class="additonalInformation collapse" id="collapse_96" aria-expanded="false" style="height: 0px;">
        <table class="subtable_use_not_for_striped">
          <tbody>
            <tr>
              <td>Content 1</td>
            </tr>
            <tr>
              <td>Content 2</td>
            </tr>   
          </tbody>
        </table>
      </div>
    </td>
  </tr>
</table>
htmlcsshtml-tablecss-selectors

Answer №1

Feel free to take a look at the table structure below that I have created.

This CSS selector was utilized:

table.outer > tbody > tr:nth-child(even) {
  background: #ddd;
}

I would appreciate your thoughts on this design. Thank you!

table {
  border-collapse: collapse;
}
table.outer > tbody > tr:nth-child(even) {
  background: #ddd;
}
<table class="outer" border="1">
  <tr>
    <td>
      <table border="1">
        <tr>
          <td>2nd Table</td>
          <td>2nd Table</td>
        </tr>
        <tr>
          <td>2nd Table</td>
          <td>2nd Table</td>
        </tr>
        <tr>
          <td>2nd Table</td>
          <td>2nd Table</td>
        </tr>
        <tr>
          <td>2nd Table</td>
          <td>2nd Table</td>
        </tr>
      </table>
    </td>
    <td>1st table</td>
  </tr>
  <tr>
    <td>1st table</td>
    <td>1st table</td>
  </tr>
  <tr>
    <td>1st table</td>
    <td>1st table</td>
  </tr>
  <tr>
    <td>1st table</td>
    <td>1st table</td>
  </tr>
  <tr>
    <td>1st table</td>
    <td>1st table</td>
  </tr>
  <tr>
    <td>1st table</td>
    <td>1st table</td>
  </tr>

</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

Switching the background image of a div by clicking on a different div

To start, you can locate all of my code right here. http://jsfiddle.net/yfukm8kh/1/ The issue I'm encountering pertains to the following section. var changePic = function (direction, id, array) { var intID = parseInt(id); var intDir = pars ...

jqueryhtmlcssbackground-image

Issue with Bootstrap4: organizing columns correctly within and outside a container

I've hit a roadblock while working on a project and can't seem to find the right solution. I've already created a design in Photoshop to illustrate what I'm trying to achieve: Photoshop Design. Basically, I want the main content inside ...

cssbootstrap-4flexboxcontainersspacing

Why can I only click on the text of my button?

Looking for a quick fix here! I've been trying to make the entire button clickable, but so far, only the text is hyperlinked. Any suggestions on how to enclose the whole button with the link? As you can see, I'm working on making it mobile-friend ...

jqueryhtmlcss

unnecessary shading effect on SVG text

My SVG text suddenly has a strange drop shadow that I can't seem to get rid of. Despite checking the reference guide I purchased on Amazon, I still haven't found any solutions. There are no filters applied and the markup seems to align with examp ...

htmltextsvg

What is the best method for accessing the properties of a JavaScript object based on input from a textbox?

Just starting out with angular and having trouble generating or updating a table based on text boxes. The schema includes country, sales, and profit fields. There are two text boxes for the x-axis and y-axis inputs. The table should dynamically update when ...

javascripthtmlangularmongodbtypescript

Achieving full-width container on mobile devices with Bootstrap

Despite my efforts in the CSS file, I am still struggling to get the container to take up the full width on mobile devices. Here is my CSS code: @media (max-device-width: 1024px) { .col-sm-2{ width: 100%; } .container { margin: 0 auto; width: ...

htmlcssbootstrap-4

Angular 2: Enhancing Tables

I am looking to create a custom table using Angular 2. Here is the desired layout of the table: I have a Component that provides me with data export class ResultsComponent implements OnInit { public items: any; ngOnInit() { this.items = [&apos ...

javascripthtmlcssangulartypescript

Creating a circular text element with text both in the center and around the edges using CSS

I am attempting to recreate this image using CSS. Unfortunately, I haven't had success achieving those detailed edges with text. Is it feasible to accomplish this effect in CSS, and if so, what approach would be best? ...

htmlcsscss-selectorscss-animations

Experiencing difficulties with retrieving form data in req.body using Express and node.js

I am facing an issue while trying to create a registration form for new users with profile picture upload. Despite adding body-parser middleware, the form data is not passing correctly to the route and I cannot identify the reason behind it. Error: D:&bso ...

javascripthtmlnode.jsexpress

Instructions for changing the background of a specific area to gray

Could use some assistance in changing the red area to grey, tried numerous solutions but can't figure it out. Any help would be highly appreciated! Looking to change the background to a light grey excluding the top bar and navigation. Image Current ...

htmlcsstwitter-bootstrap

When utilizing dynamic binding within *ngfor in Angular 4, the image fails to display properly

I'm encountering an issue with an <img> tag that isn't behaving as expected in my code snippet: <div *ngFor="let familyPerson of userDataModel.family" class="col-md-6 col-lg-4 family-member"> <div class="fm-wrapper"> ...

htmlcssangular

The action does not execute when the form is submitted

I’m currently working on a simple registration form, but I’ve encountered an issue with my code. Despite troubleshooting, I can’t seem to identify any errors in my code. Upon submission of the form, the page fails to redirect to register.php. Below ...

phphtml

Issue with event listener arising once elements have been loaded into the dom

I have a project where I want to click on a category card to obtain its id and then redirect to the movies screen. I understand that using row.eventlistener() in index.js executes before the elements are rendered, causing the id not to be captured. How ca ...

javascripthtmlfetch-api

Refresh a specific DIV element without having to refresh the entire page

I have a Div Tag that includes Small.php to populate it with information. My goal is to refresh the content every 15 seconds without reloading the entire webpage. I've attempted using JavaScript/jQuery without success. <script type="text/javascrip ...

javascriptphpjqueryhtmlajax

Center a Bootstrap 4 card both vertically and horizontally without overflowing the screen

I am facing an issue with a single page layout where I have a centrally positioned card containing a form and text. Once the form is submitted, a list is displayed. However, sometimes the list is lengthy causing the card to cut off at the top with no scrol ...

csstwitter-bootstrapbootstrap-4

The issue of checkboxes not being sorted properly in Slick Grid

Currently, I am working on resolving a sorting issue within one of our applications using Slick Grid for grid implementation. The existing sort function, although functional, presents a challenge. While it successfully sorts columns, the checkbox associate ...

javascriptjqueryhtmlsortingslickgrid

Adding a unique component to a Spring Boot application with Thymeleaf integration

My navigation bar includes a list with a dropdown feature. When the user clicks on the dropdown entry, I want to display a snippet of another HTML page within the project. The navigation bar HTML code is as follows: <div th:fragment="navbar"& ...

javahtmlspring-bootthymeleafbootstrap-5

How to enhance your jQuery Gallery with clickable images?

I have recently integrated a jQuery Gallery into my website. While everything is functioning properly, I am looking to transform the gallery images into clickable links that lead to higher quality versions of the images. Below is the code snippet for the g ...

jqueryhtmlimagegalleryhref

The issue with the Angular custom checkbox directive arises when using it within an ng-repeat

A personalized directive has been developed for checkboxes that is applicable throughout the application. The code for creating the checkbox is as follows: JS angular.module("myApp") .component("ngCheckbox", { template: '<di ...

javascripthtmlcssangularjscheckbox

URL for Database Query String

I need help figuring out how to extract database information using a URL. On the page, each event entry should have a hyperlink that leads to a new form where administrators can record results for that specific event. The EventID is passed as a query st ...

phpmysqlhtml