Question

我正在尝试制作一个仅与CSS兼容的CSS斑马表。

我试过了：

.zebra {
    border-collapse: collapse;
}
.zebra tr:first-child {
    background-color: #7BCC70;
    vertical-align: top;
}

.zebra tr[valign=top] + tr {
    color: #EEE;
    vertical-align: bottom;
}
.zebra tr[valign=bottom] + tr {
    color: #7BCC70;
    vertical-align: top;
}

由于第一条规则，纵向对齐不会影响任何内容。我将第一个tr的颜色设置为color1，将vertical-align的颜色设置为indicator1。然后我尝试使用valign来获得tr的垂直对齐，但这不起作用。 vertical-align不是valign，就像bgcolor不是背景颜色一样。我可以获得价值，但我无法设定它。我可以设置vertical-align，但我无法通过CSS获取它。你能想到可以在CSS中设置和获取的东西吗？

.zebra是表，这是常规的：

<table class="zebra" border="0">
<tr>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
</tr>
<tr style="background-color: white;">
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
</tr>
<tr>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
</tr>
<tr>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
</tr>
<tr>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
</tr>
<tr>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
</tr>
<tr>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
</tr>
<tr>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
</tr>
</table>

你问过它。

Answer 1

我很确定IE7不支持在具有动态行数的表中选择奇数行或偶数行的好方法，而不会将它们标记为：

tr.odd { background-color:#7bcc70; }
tr.even { background-color:#eee; }

<table>
  <tr class="odd">
    <td></td>
  </tr>
  <tr class="even">
    <td></td>
  </tr>
</table>

或者，您可以使用jQuery脚本为您完成工作，如此处所述：http://masterdev.dyndns.dk/dev/16.html

就个人而言，我使用它（对于现代浏览器）：

.zebra tr:nth-child(odd) { background-color: #7bcc70; }
.zebra tr:nth-child(even) { background-color: #eee; }

<table class="zebra">
  <tr>
    <td></td>
  </tr>
  <tr>
    <td></td>
  </tr>
</table>

请注意，这不需要您标记每一行。我回到旧版浏览器的普通（非斑马）表。然而，在我的项目中，我被允许某种程度的优雅降级。

可以通过CSS获取和设置的属性（变量？）

1 个答案: