How to Use Nth-Child for Styling with a Table with Rowspan

How to use nth-child for styling with a table with rowspan?

Unfortunately, there's no way to do this with :nth-child() alone, or by using CSS selectors alone for that matter. This has to do with the nature of :nth-child() which selects purely based on an element being the nth child of its parent, as well as with CSS's lack of a parent selector (you can't select a tr only if it doesn't contain a td[rowspan], for example).

---

jQuery does have the :has() selector that CSS lacks, though, which you can use in conjunction with :even (not :odd as it's 0-indexed versus :nth-child()'s 1-index) for filtering as an alternative to CSS:

$('tr:not(:has(td[rowspan])):even')

jsFiddle preview

Use nth-child for a repeating range of table rows

You can use formulas in nth-child:

tr:nth-child(6n+1), tr:nth-child(6n+2), tr:nth-child(6n+3) {
    background-color: green;
}

This will select every 6th child and the two subsequent ones (means: always the first three out of six).

Tailored to your example:

tr:nth-child(6n+1), tr:nth-child(6n+2), tr:nth-child(6n+3) { background-color: green;}

<table border=1><tr>    <td width='30px' rowspan='3'>1</td>    <td width='150px'>1</td>    <td width='150px'>1</td></tr><tr>    <td width='150px'>2</td>    <td width='150px'>2</td></tr><tr class='trContacts'>    <td colspan='3'>3</td></tr><tr>    <td width='30px' rowspan='3'>4</td>    <td width='150px'>4</td>    <td width='150px'>4</td></tr><tr>    <td width='150px'>5</td>    <td width='150px'>5</td></tr><tr class='trContacts'>    <td colspan='3'>6</td></tr><tr>    <td width='30px' rowspan='3'>7</td>    <td width='150px'>7</td>    <td width='150px'>7</td></tr><tr>    <td width='150px'>8</td>    <td width='150px'>8</td></tr><tr class='trContacts'>    <td colspan='3'>9</td></tr><tr>    <td width='30px' rowspan='3'>10</td>    <td width='150px'>10</td>    <td width='150px'>10</td></tr><tr>    <td width='150px'>11</td>    <td width='150px'>11</td></tr><tr class='trContacts'>    <td colspan='3'>12</td></tr></table>

How do I use nth child in table to color certain column and row of data only?

It is because of using the rowspan. Have a look at the example here

Table 1 is a normal table when we create without using rowspan.

Now look at Table 2 When you use rowspan The table structure becomes like this. Using rowspan doesnot means that It will swap the next row. rather it pushes the First column of second Row to Second Column of Second Row. so As of styles applied. you see the second column of second row as red.

Solution
The simple solution is as follows

<table style="width:100%">
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td rowspan="2">Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
  <td style="display:none"></td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
</table>

Result

Hope, This will help you. Please checkmark the asnwer if it solves your problem.

Any queries are welcomed!

Thanks

Set css style on first row of the table on case first row has rowspan

You can set it in Javascript background using:

nth-child(-n+${rowspan})

Eg.

let tr = document.getElementsByTagName("tr")[0];
let td = tr.getElementsByTagName("td")[0];
let rowspan = td.rowSpan? td.rowSpan:1; 
var nodes = document.querySelectorAll(`tbody tr:nth-child(-n+${rowspan})`);
for (let i = 0; i < nodes.length; i++) {
  nodes[i].style.background = '#1DA6C0';
}

https://jsfiddle.net/xugL8s9b/10/

Modifying nth child for table cells

You can either apply the .Date background on tr:nth-child(odd) or tr:not(:nth-child(even))

.TabSymbols tr:nth-child(even) { background-color: #f2f2f2; }/*.TabSymbols tr:nth-child(odd) .Date { background: #666; color: #fff; }*/.TabSymbols tr:not(:nth-child(even)) .Date { background: #666; color: #fff; }

<table class="TabSymbols">  <tr>    <td class="Date">foo</td>    <td>foo</td>    <td>foo</td>    <td>foo</td>  </tr>  <tr>    <td>foo</td>    <td>foo</td>    <td class="Date">foo</td>    <td class="Date">foo</td>  </tr>  <tr>    <td>foo</td>    <td>foo</td>    <td class="Date">foo</td>    <td>foo</td>  </tr>  <tr>    <td>foo</td>    <td class="Date">foo</td>    <td>foo</td>    <td>foo</td>  </tr></table>

How can you put 'rowspan' specific CSS in an html table?

The answer that works for me (from @RobG's comment) is dividing the groups rows into sections using <tbody>. Then I can refer to each tbody's nth-child.

Here's the modified example that works:

table tr,td {  border: 1px solid black;}tbody:nth-child(1) {  background-color: red;}tbody:nth-child(2) {  background-color: blue;}

<table>  <tbody>  <tr>    <td rowspan=2>Section 1</td>    <td>Data 1a</td>  </tr>  <tr>    <td>Data 1b</td>  </tr>  </tbody>  <tbody>  <tr>    <td rowspan=3>Section 2</td>    <td>Data 2a</td>  </tr>  <tr>    <td>Data 2b</td>  </tr>  <tr>    <td>Data 2C</td>  </tr>  </tbody>

How can I change a row's background colour with nth-child inline?

An inline style relates only to the element in whose tag it is written (i.e. without a selector). You'd have to write the background definition into each single td to which it should apply...

As an in-between solution (between external stylesheet and inline style), you can add a <style> tag to your HTML code and put the CSS rules in there.

Alternate row color in HTML table with rowspan

A table can have multiple tbody elements. You can use tbody with nth-child to have different colors for your groups of rows:

table {  width: 100%;  border-collapse: collapse;}
thead {  background: #e3e3e3;}
tbody * {  font-weight: normal;}
tbody:nth-child(odd) {  background: red;}
tbody:nth-child(even) {  background: blue;}
tr,th {  padding: 10px 0;}
th {  width: 33.33333%;}

<table>  <thead>    <tr>      <th>Column 1</th>      <th>Column 2</th>      <th>Column 3</th>    </tr>  </thead>  <tbody>    <tr>      <th rowspan="3" class="add-color">Row Title</th>      <th>Bla Bla</th>      <th>Bla Bla</th>    </tr>    <tr>      <th>Bla Bla</th>      <th>Bla Bla</th>    </tr>    <tr>      <th>Bla Bla</th>      <th>Bla Bla</th>    </tr>  </tbody>  <tbody>    <tr>      <th class="add-color" rowspan="2">Row Title</th>      <th>Bla Bla</th>      <th>Bla Bla</th>    </tr>    <tr>      <th>Bla Bla</th>      <th>Bla Bla</th>    </tr>  </tbody>  <tbody>    <tr>      <th class="add-color">Row Title</th>      <th>Bla Bla</th>      <th>Bla Bla</th>    </tr>  </tbody>  <tbody>    <tr>      <th rowspan="4" class="add-color">Row Title</th>      <th>Bla Bla</th>      <th>Bla Bla</th>    </tr>    <tr>      <th>Bla Bla</th>      <th>Bla Bla</th>    </tr>    <tr>      <th>Bla Bla</th>      <th>Bla Bla</th>    </tr>    <tr>      <th>Bla Bla</th>      <th>Bla Bla</th>    </tr>    <tr>  </tbody></table>

---

Related Topics