0

我有以下代码，它在五对行的三列中显示单词计数矩阵，每对包含一个单词和一个计数（由@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;
}

预先感谢您的帮助。:)

4

1 回答 1

3

这是我只使用 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 伪选择器来获取每个奇数表元素，添加 a border-left，然后得到偶数元素并添加margin-right间距和border-right.

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

于 2013-04-03T02:54:14.360 回答