テーブルゼブラの色が全ラインに塗りつぶさない

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

あなたが見ているスペースは、tableに設定されているborder-spacing性質によるものです。これは、border-spacingを削除し、border-collapse: collapseをtableに追加することで避けることができます。そのために

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>