文章/答案/技术大牛

发布

社区首页 >问答首页 >HTML表行中的交替颜色无法工作

问HTML表行中的交替颜色无法工作
EN

Stack Overflow用户

提问于 2013-08-22 06:33:03

回答 1查看 1.9K关注 0票数 1

我创建了一个具有以下样式的JSP，

<style type="css/text">
tr.color1{background-color:#00FCFF;}
tr.color2{background-color:#c1bfbb;}
</style>

我在JSP中建模一个属性并呈现一个表。因为我迭代了在JSP中建模的列表，所以我必须为交替的HTML表行设置一个逻辑。

我使用了JSTL，并有以下代码：

 <c:forEach items="${rSList}" var="rS" varStatus="rowCounter">
      <tr class="${rowCounter.index % 2 == 0  ? 'color2':'color1'}">
          <td style="padding-left: 4px;" >
              <font face="verdana"><c:out value="${rS.NAME}" /></font>
          </td>

          <td style="padding-left: 4px;" >  
              <font face="verdana"><c:out value="${rS.AVAILABLE}" /></font>
          </td>

          <td style="padding-left: 4px;" >  
              <font face="verdana"><c:out value="${rS.OWNER}" /></font>
          </td>

我使用了Firebug，并看到这个类实际上被替换为：

<tr class="color2">
<!- td data gets displayed here without color2 background-->

<tr class="color1">
<!- td data gets displayed here without color1 background-->

<tr class="color2">
<tr class="color1">
<tr class="color2">

这意味着类将被选中，但是背景色不会改变。感谢你的帮助。

html-table

tablerow

html

css

jstl

回答 1

Stack Overflow用户

回答已采纳

发布于 2013-08-22 06:35:40

你的工作方式应该是没有错的，它可能与特定性有关，比如你使用的是class，但其他一些规则更具体，比如

#demo table tr {
    background: #fff;
}

Demo 失败(特异性问题)

因此，在上面的示例中，尽管应用了类，并且tr应该使用背景，但它不会像之前声明的那样使用更具体的规则，或者说您使用的是!important。您可以检查元素，并查看从哪个选择器/规则中应用了什么颜色。

另外，如果您想在很大程度上保存标记，可以简单地使用下面的CSS，它将应用于表中的奇数行和偶数行，而无需声明类，例如

table tr:nth-child(odd) {
  background: #f00;
}

table tr:nth-child(even) {
  background: #000;
}

Demo

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/18373221

复制

相似问题

问HTML表行中的交替颜色无法工作
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问HTML表行中的交替颜色无法工作EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问HTML表行中的交替颜色无法工作
EN