php - CSS を使用して、ペアになっている列グループの間に空白の列を追加するにはどうすればよいですか?

Question

次のコードは、単語数のマトリックスを 5 つのペアの行の 3 つの列に表示します。各ペアには単語とカウントが含まれています (ここで @Aiias によってスタック オーバーフローで提供されます)。ペアになったグループの色を交互に変えるタグを追加しました。次のようになります。

   | | 単語 | カウント | 単語 | カウント | 単語 | カウント |
   | | 単語 | カウント | 単語 | カウント | 単語 | カウント | など

次のように、「単語」と「カウント」の間の境界線を削除するだけでなく、ペアになった各列の間に可変幅の空白スペースを追加するのに苦労しています。

   | | 単語数 | スペース | 単語数 | スペース | 単語数 |
   | | 単語数 | スペース | 単語数 | スペース | 単語数 | など

ここに私が持っているものがあります:

function showWords($words) {
        $rows = array();
        $max_per_column = 5;
        $max_words = 15;
        $rows = array_pad($rows, $max_per_column, array());
        $count = 0;
        foreach ($words as $word => $item) {
            if ($count >= $max_words) {
                break;
            }
            array_push($rows[$count % $max_per_column], $word, $item);
            $count++;
        }           
        ?>

        <table id="table" class="table-list">
            <colgroup span="2">
                <col style="background: #CCFFCC;">
                <col style="background: #FFCCCC;">
            </colgroup>
            <colgroup span="2">
                <col style="background: #CCFFCC;">
                <col style="background: #FFCCCC;">
            </colgroup>
            <colgroup span="2">
                <col style="background: #CCFFCC;">
                <col style="background: #FFCCCC;">
            </colgroup>
          <tbody>
            <?php
              foreach ($rows as $cols) {
                echo '<tr><td>' . implode('</td><td>', $cols) . '</td></tr>';
              }
            ?>
          </tbody>
        </table>   
        <?            
    }

追加の CSS は次のとおりです。

#table {
   font-family: "Calibri", Sans-Serif;
   font-size: 11px;
   margin: 0px;
   width: auto;
   text-align: left;
   border-collapse: collapse; 
}
table.table-list {
   width: 36%;
   line-height: 1;
   text-align: left;
}

どうぞよろしくお願いいたします。:)