How can I use CSS to add a blank column between paired column groupings?

pandoralu

New Member
I have the following code that displays a matrix of word counts in three columns of five paired rows, each pair containing a word and a count (supplied by @Aiias here in stackoverflow). I added the tags to alternate colors in the paired groupings. It now looks like this:   | word | count | word | count | word | count |
   | word | count | word | count | word | count |, etc.I am struggling to add a variable-width blank SPACE between each paired column, as well as remove the border between 'word' and 'count' to look like this:   | word count | SPACE | word count | SPACE | word count |
   | word count | SPACE | word count | SPACE | word count |, etc.Here's what I have:\[code\]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> <? }\[/code\]Here is the additional CSS:\[code\]#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;}\[/code\]Thank you, kindly, in advance for your assistance. :)
 
Back
Top