Table Styling Where Rowspan > 1

Question

I have this table and I've got it set out where quite a few cells in the first column have a rowspan greater than 1. This causes a problem for the styling I use:

tbody > tr:nth-of-type(odd) {
    background-color:#55f
}

How can I get it set up so any row where the first columns cell styling? I have set up a fiddle because I don't exactly know how to explain it.

In the fiddle there are 2 tables, the top is what happens, and the bottom is what I want to happen (without inline styling)

http://jsfiddle.net/qLrauoxc/1/

Are you looking for a pure CSS answer or would you be willing to look into JS as well ? — rorofromfrance, Sep 05 '14 at 10:06
@rorofromfrance I would like to go pure CSS but I'm happy to use JS if it's easier — Spedwards, Sep 05 '14 at 10:07
yeah that's the thing, I'm contemplating your jsfiddle and I'm not sure if it's possible to do so w/ CSS only .. interesting question — rorofromfrance, Sep 05 '14 at 10:09
@rorofromfrance I'd expect it to be a HTML or JS answer more than CSS anyhow. — Spedwards, Sep 05 '14 at 10:11
Can this be of any use? http://stackoverflow.com/a/19590520/2703418 I looked at it for a very long time, and I'm quite convinced you can't do this with CSS only. — bzeaman, Sep 05 '14 at 10:15
@Spedwards is this always gonna be the first cell that could be rowspan'ed' ? Or could it be random ones in the middle ? — rorofromfrance, Sep 05 '14 at 10:25

score 0 · Answer 1 · answered Sep 05 '14 at 10:51

0

You can have multiple tbody in a table. If it makes sense in your case, you could use them to group your tr, and apply the background-color on the tbody:nth-of-type(odd).

answered Sep 05 '14 at 10:51

GentleFish

349
3
5

reuelab · Answer 2 · 2015-07-28T08:11:26.920

UPDATE: UPDATED FIDDLE

Using jQuery.

The counter variable will represent all the first <td> of all <tr> on #one <tbody>.
The restricted variable will represent the span of a <td> with a set attribute of rowspan, and the number of <tr>s that will be skipped.
The flag variable will represent the skip(odd or even).

Note: Changing the initial flag to 1, will make the highlighting start at the second that will be found (even).

jQuery:

     $(document).ready(function(){
    var counter = 1;
    var restricted = 0;
    var flag = 0;
    $("#one tbody > tr td:first-child").each(function(){
        var x = $(this).attr("rowspan");
        if(counter > restricted){
        if(flag == 0){
        $(this).parent().css({"background-color":"#f0f"});
        if (typeof x !== typeof undefined && x !== false) { 
            var $selector = $(this).parent();
            for(var i=1;i<x;i++){
                $selector.next('tr').css({"background-color":"#f0f"});
                $selector = $selector.next('tr');
            }
            if(flag == 0){
                flag = 1;
            }
            restricted = restricted + parseInt(x);
        }  
        else{
            restricted = restricted + 1;
            if(flag == 0){
                flag = 1;
            }
        }       
    }
    else if(flag == 1){
        var x = $(this).attr("rowspan");
        if (typeof x !== typeof undefined && x !== false) { 
            restricted = parseInt(restricted) + parseInt(x);
        }    
        else{
            restricted = restricted + 1;
        }
       flag = 0;
    } 
    }
        counter++;        
    });
});

UPDATED JSFIDDLE

This currently effects odd rows which is great and what I wanted but if I wanted to change it to even, what would I change exactly? — Spedwards, Sep 07 '14 at 15:57

Table Styling Where Rowspan > 1

2 Answers2