我试过tr:nth元素......不工作
下面是我的jsp和css jsp从java类中获取2个列表 如果列表为空,则包括验证,然后显示值 数据网格是表类
<table class="data-grid" cellpadding="0" cellspacing="0">
<thead>
<tr>
<th colspan="6">Excesses to be actioned</th>
</tr>
</thead>
<tr class="header">
<th>Excess ID</th>
<th>Date</th>
<th>Client</th>
<th>Product</th>
<th>Amount</th>
<th>DA</th>
</tr>
<tbody id="tbNa">
<c:choose>
<c:when
test="${empty actionBean.excessList.newActiveCustomerExcessUIList}">
<tr>
<td colspan="6" align="center"><font color="red">No
data available for Active Excess List</font></td>
</tr>
</c:when>
<c:otherwise>
<c:forEach
items="${actionBean.excessList.newActiveCustomerExcessUIList}"
var="customerExcess" varStatus="loop">
<c:set var="clientName" value="${customerExcess.clientName}"
scope="page"></c:set>
<c:set var="ultimateParent"
value="${customerExcess.ultimateParent}" scope="page"></c:set>
<c:set var="cif" value="${customerExcess.cif}" scope="page"></c:set>
<c:forEach items="${customerExcess.excessList}" var="excess">
<tr>
<td><c:out value="${excess.excessId }"></c:out></td>
<td><c:out value="${excess.openDate }"></c:out></td>
<td><a href="#" onclick="openClientExcessPage('${cif}');"><c:out
value="${clientName}"></c:out></a></td>
<td><c:out value="${ultimateParent}"></c:out></td>
<td><c:out value="${excess.excessAmount }"></c:out></td>
<td><c:out value="${excess.excessDa}"></c:out></td>
</tr>
</c:forEach>
</c:forEach>
</c:otherwise>
</c:choose>
<c:choose>
<c:when
test="${empty actionBean.excessList.approvedCustomerExcessUIList}">
<tr>
<td colspan="6" align="center"><font color="red">No
data available for Approved Excess List</font></td>
</tr>
</c:when>
<c:otherwise>
<c:forEach
items="${actionBean.excessList.approvedCustomerExcessUIList}"
var="customerExcess">
<c:set var="clientName" value="${customerExcess.clientName}"
scope="page"></c:set>
<c:set var="ultimateParent"
value="${customerExcess.ultimateParent}" scope="page"></c:set>
<c:forEach items="${customerExcess.excessList}" var="excess">
<tr>
<td><c:out value="${excess.excessId }"></c:out></td>
<td><c:out value="${excess.openDate }"></c:out></td>
<td><a href="#" onclick="openClientExcessPage('${cif}');"><c:out
value="${clientName}"></c:out></a></td>
<td><c:out value="${ultimateParent}"></c:out></td>
<td><c:out value="${excess.excessAmount }"></c:out></td>
<td><c:out value="${excess.excessDa }"></c:out></td>
</tr>
</c:forEach>
</c:forEach>
</c:otherwise>
</c:choose>
</tbody>
</table>
数据网格是表类...下面是为表编写的css 我不想改变行颜色..我需要更改偶数行中数据的字体颜色
.data-grid {
margin: 0px;
padding: 0px;
width : 60%;
height : 40%;
padding-top: 10%;
padding-left: 15%;
white-space: nowrap;
}
.data-grid select {
padding: 3px 0px;
border: 1px solid #DCDCDC;
}
.data-grid td {
font-size: 11px;
color: #000000;
background-color: white;
border: 0px;
border-left: 1px;
border-bottom: 1px;
border-style: solid;
border-color: #DBE5F1;
padding: 5px;
}
.data-grid thead {
color: #004080;
font-size: 12px;
font-weight: normal;
border-color: #FFF;
vertical-align: text-top;
background-color: #C3C3C3;
height: 20px;
padding: 2px 5px;
}
.data-grid .header th {
color: #002577;
font-size: 11px;
font-weight: bold;
border-color: #FFF;
text-align: center;
vertical-align: text-top;
background-color: #D5E0E6;
}
答案 0 :(得分:1)
.data-grid tr:nth-child(even) {color: #CCC}
.data-grid tr:nth-child(odd) {color: #FFF}
答案 1 :(得分:0)
检查此示例
<!DOCTYPE html>
<html>
<head>
<style>
.myclass1 tr:nth-child(odd)
{
background:#ff0000;
}
.myclass1 tr:nth-child(even)
{
background:#0000ff;
}
.myclass2 tr:nth-child(odd)
{
background:#00ff00;
}
.myclass2 tr:nth-child(even)
{
background:#ff0000;
}
</style>
</head>
<body>
<table width="100%" border=1 class="myclass1">
<tr><td>aaaa</td></tr>
<tr><td>bbbb</td></tr>
<tr><td>cccc</td></tr>
<tr><td>dddd</td></tr>
</table>
<table width="100%" border=1 class="myclass2">
<tr><td>aaaa</td></tr>
<tr><td>bbbb</td></tr>
<tr><td>cccc</td></tr>
<tr><td>dddd</td></tr>
</table>
</body>
</html>
答案 2 :(得分:0)
tr:nth-child(even) {background-color: #f2f2f2;color:red}
tr:nth-child(odd) {background-color: #f2f2f2;color:blue}