Question

有没有办法让HTML表格中的行和列在2种不同颜色之间格格不入？

我制作了一个像数据列表一样的电子表格，我认为如果行/列在白色和灰白色之间格纹化，它看起来会更好，更容易看到。

谢谢！

Answer 1

您有哪种浏览器支持要求？您是否能够放弃对IE7及更早版本的支持？如果是这样，你可以使用第n个表达式纯粹使用CSS：

tr td
{
    background-color: #fff;
}

tr:nth-child(even) td:nth-child(odd), 
tr:nth-child(odd) td:nth-child(even)
{
    background-color: #ccc;
}

Answer 2

查看Colorize - jQuery Table Plugin中的示例 - 它涉及一些Javascript，但您可以按原样使用它，或者作为示例阅读。

Colorize是一个jQuery插件，用于向备用表行添加背景颜色，在鼠标悬停时突出显示行/列，并在单击鼠标按键时为行/列着色。您可以根据需要为任意数量的表行着色。重复鼠标单击会将行恢复为原始背景颜色。

Answer 3

当然可以。这是一个简单的JavaScript函数，可以为您处理：

function altRows() {
    var table = document.getElementById("tableToAlternateRowsIn");
    var tRows = table.getElementsByTagName("tr");
    var cssClassName;

    for(var i = 0; i < tRows.length; i++) {
        (i % 2 == 0) ? cssClassName = "odd" : cssClassName = "even";
        tRows[i].className = cssClassName;
    }
}

window.onload = altRows;

那应该为你做的伎俩。没有经过测试，因此可能无法按计划完成。

Answer 4

不确定。使它们具有相同的白色（即保持默认值），然后以编程方式为每个其他TD（或span或div或li或......）添加灰白色样式。

请注意，您需要从“0”或“0”列开始，具体取决于您所在的行。

Answer 5

要使用HTML + CSS执行此操作并使其适用于所有主流浏览器，您必须手动为每个备用行添加一个类：

<tr>
   <td>col1</td>
   <td>col2</td>
</tr>
<tr class="highlight">
   <td>col1</td>
   <td>col2</td>
</tr>
<tr>
   <td>col1</td>
   <td>col2</td>
</tr>
<tr class="highlight">
   <td>col1</td>
   <td>col2</td>
</tr>

等...

然后使用CSS更改行的颜色：

tr {
  background-color: #FFF;
}
tr.highlight {
  background-color: #CCC;
}

Answer 6

有几篇文章声称斑马条纹（对于棋盘游戏来说没有任何帮助）无助于阅读。 Checker-boarding虽然CSS中有趣的例外，但在我看来更容易让人分心。请参阅A List Apart: zebra striping - does it help以及其他地方。

方格表行和列？

6 个答案: