表斑马颜色不着色整线

Question

我正在使用Jquery创建一个表，并通过代码添加其内容和样式。当我尝试使用这条线使斑马色时，颜色不会穿过每个td之间的空间：

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

所以表最终看起来像这样：

有没有办法让整个桌子的颜色水平伸展到边框？

我制作表格的代码如下：

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')});

Answer 1

您看到的空间是由border-spacing上设置的table属性引起的。这可以通过移除border-spacing并将border-collapse: collapse添加到table来避免，如下面的代码段所示。

＆＃13;

＆＃13;

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')});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

＆＃13;

＆＃13;

＆＃13;