php - 如何使用 CSS 在成对的列分组之间添加空白列？

Question

我有以下代码，在三列五对行中显示字数矩阵，每对包含一个字和一个计数(由@Aiias 在 stackoverflow 中提供)。我将标签添加到配对分组中的交替颜色。现在看起来像这样:

|词 |计数 |词 |计数 |词 |计数 |
|词 |计数 |词 |计数 |词 |计数|等

我正在努力在每个成对的列之间添加一个可变宽度的空格，并删除“word”和“count”之间的边框，看起来像这样:

|字数 |空间 |字数 |空间 |字数 |
|字数 |空间 |字数 |空间 |字数 | 等

这是我所拥有的:

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

提前感谢您的帮助。 :)

Answer 1

这是我仅使用 CSS 修改所能想到的最好结果(JSFiddle:http://jsfiddle.net/zKRYM/2/):

td:nth-child(2n-1) {
    background: lightgreen;
    border-left: 2px solid blue;
}

td:nth-child(2n) {
    display: block;
    background: pink;
    margin-right: 30px;
    border-right: 2px solid blue;
}

我使用 CSS 伪选择器获取每个奇数表格元素，添加一个 border-left，然后获取偶数元素并添加 margin-right间距以及 border-right。

请注意，我还删除了表格标题并将颜色转移到 td 元素上，而不是将它们保留在 col 元素上。这是因为我添加了边距，并且我假设您希望它们是白色的(不填充颜色)。请注意，您仍然可以保留 col 和 colgroup，只需删除背景色即可。