コードは「Rank」ヘッダーを行としてカウントし、それに1を割り当てていると思います。の最初の番号を変更するにはどうすればよいcounter-incrementですか？テーブルを0から開始して、「Rank」ヘッダーに0が割り当てられ、次の行が1になるようにします。
http://oi59.tinypic.com/5bsabc.jpg
CSSファイル
tr.odd {background-color: #FFFFFF}
tr.even {background-color: #F2F2F2}
table {
counter-reset: rowNumber;
}
table tr {
counter-increment: rowNumber;
}
table tr td:first-child::before {
content: counter(rowNumber);
min-width: 1em;
text-align: center;
}
JSPファイル
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="<c:url value='/css/egovframework/leaderboard.css'/>" />
<form id="listForm" name="listForm" method="post">
<input type="hidden" name="id"/>
</form>
<h1 style="text-align:center;font-size:56px; font-family: Mistral;margin-top:-45px;">Leaderboard</h1>
<body style="font-family:Arial;font-size:14px;text-align:center;color:#000000;">
<div id="table">
<table bordercolor="#FFFFFF" cellpadding="12px" cellspacing="2px" align="center" style="margin-top:-21px;">
<colgroup>
<col style="width:50px">
<col style="width:500px">
<col style="width:150px">
<col style="width:100px">
</colgroup>
<tr>
<th style="padding-top: 5px; padding-bottom: 5px; margin-bottom:-10px; width:50px; height:35px; text-align:left; font-family:Arial; font-size:14px; color:#000000; margin-top: 50px; color: #FFFFFF; border:0px; background-color: #32CD32;">Rank</th>
<th style="padding-top: 5px; padding-bottom: 5px; margin-bottom:-10px; width:100px; height:35px; text-align:left; font-family:Arial; font-size:14px; color:#000000; margin-top: 50px; color: #FFFFFF; border:0px; background-color: #32CD32;">Name</th>
<th style="padding-top: 5px; padding-bottom: 5px; margin-bottom:-10px; width:150px; height:35px; text-align:left; font-family:Arial; font-size:14px; color:#000000; margin-top: 50px; color: #FFFFFF; border:0px; background-color: #32CD32;">Points</th>
<th style="padding-top: 5px; padding-bottom: 5px; margin-bottom:-10px; width:100px; height:35px; text-align:left; font-family:Arial; font-size:14px; color:#000000; margin-top: 50px; color: #FFFFFF; border:0px; background-color: #32CD32;">Wins</th>
</tr>
<c:forEach var="item" items="${leaderboard}" varStatus="loopStatus">
<tr class="${loopStatus.index % 2 == 0 ? 'even' : 'odd'}">
<td align="center" class="listtd" style="font-size:14px; border:2px; bordercolor:#000000;">
</td>
<td align="left" class="listtd" style="font-size:14px; border:2px; bordercolor:#000000; cursor:pointer;" onclick="javascript:selectPlayer('${item.id}');">
<c:out value="${item.playersLastName}"/>, <c:out value="${item.playersFirstName}"/>
</td>
<td align="center" class="listtd" style="font-size:14px; border:2px; bordercolor:#000000;">
<c:out value="${item.playersPoints}"/>
</td>
<td align="center" class="listtd" style="font-size:14px; border:2px; bordercolor:#000000;">
<c:out value="${item.playersWins}"/>
</td>
</tr>
</c:forEach>
</table>
<br/>
<br/>
<br/>
</div>
</body>
</html>
CSSカウンターのデフォルト値は常に0であり、それはあなたの場合の問題ではありません。問題は、最初の値が検出されたときに値を1にインクリメントしていることですtr。
これを解決する方法は複数あります。
counter-resetプロパティ中に、カウンタの初期値を-1として割り当てます。これは、最初に検出さtrれると、カウンター値が-1から0に増加するため、ヘッダー行に番号が付けられていないように見えることを意味します。
tr.odd {
background-color: #FFFFFF
}
tr.even {
background-color: #F2F2F2
}
table {
counter-reset: rowNumber -1;
}
table tr {
counter-increment: rowNumber;
}
table tr td:first-child::before {
content: counter(rowNumber);
min-width: 1em;
text-align: center;
}<table>
<tr>
<th>Rank</th>
<th>Name</th>
<th>Points</th>
<th>Wins</th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>検出された秒からのみカウンタ値をインクリメントtrします。これは、+（隣接する兄弟セレクター）または~（一般的な兄弟セレクター）またはを使用して実行できますnth-child(n+2)。これらのいずれかを使用すると、セレクターはtrテーブル内の2番目以降のみに一致することになります。
tr.odd {
background-color: #FFFFFF
}
tr.even {
background-color: #F2F2F2
}
table {
counter-reset: rowNumber;
}
table tr + tr {
counter-increment: rowNumber;
}
table tr td:first-child::before {
content: counter(rowNumber);
min-width: 1em;
text-align: center;
}<table>
<tr>
<th>Rank</th>
<th>Name</th>
<th>Points</th>
<th>Wins</th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>最善の推奨される解決策：ヘッダーをa内にラップしthead、コンテンツを内部にラップしtbody、カウンターがインクリメントされるセレクターを変更します。これは、テーブルに適切な構造を与え、ハックのように見えないため、推奨されます。
tr.odd {
background-color: #FFFFFF
}
tr.even {
background-color: #F2F2F2
}
table {
counter-reset: rowNumber;
}
table tbody tr {
counter-increment: rowNumber;
}
table tr td:first-child::before {
content: counter(rowNumber);
min-width: 1em;
text-align: center;
}<table>
<thead>
<tr>
<th>Rank</th>
<th>Name</th>
<th>Points</th>
<th>Wins</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加