CODEWITHSUNDEEP
jqueryhtmlcss
MarksCode
MarksCode

Reputation: 8584

Table zebra color not coloring whole line

I'm creating a table using Jquery and adding its contents and style all through code. When I try using this line to make it zebra colored, the color doesn't go across the space between each td:

$(awards).each(function(){$(this).find('tr:even').css('background-color','#cce6ff')});

so the table ends up looking like this:

Table

Is there a way to make the color stretch out across the whole table horizontally to the border?

My code for making the table looks like this:

var awards = document.createElement('table');
    $(awards).css({
        'position':'relative',
        'top':'5%',
        'left':'5%',
        'border':'2px solid black',
        'border-spacing':'10px',

    }).html('<tr><td>3/4/5 caps in a game</td><td>!</td></tr><tr><td>10/20/30 returns in a game</td><td>!</td></tr>');
    $(awards).find('td').css({
        'padding':'10px',
        'font':'15pt verdana',
        'color':'black'
    });
    $(awards).each(function(){$(this).find('tr:even').css('background-color','#cce6ff')});

Upvotes: 1

Views: 39

Answers (1)

Harry
Harry

Reputation: 89760

The space that you are seeing is due to the border-spacing property that is set on the table. That can be avoided by removing the border-spacing and adding border-collapse: collapseto table like in the below snippet.

var awards = document.createElement('table');
document.body.appendChild(awards);
    $(awards).css({
        'position':'relative',
        'top':'5%',
        'left':'5%',
        'border':'2px solid black',
        'border-collapse' : 'collapse'

    }).html('<tr><td>3/4/5 caps in a game</td><td>!</td></tr><tr><td>10/20/30 returns in a game</td><td>!</td></tr>');
    $(awards).find('td').css({
        'padding':'10px',
        'font':'15pt verdana',
        'color':'black'
    });
    $(awards).each(function(){$(this).find('tr:even').css('background-color','#cce6ff')});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Upvotes: 2

Related Questions