1

コードは「ランク」ヘッダーを行としてカウントし、それに1を割り当てていると思います。の最初の数字を変更するにはどうすればよいcounter-incrementですか? 「ランク」ヘッダーに 0 が割り当てられ、次の行が 1 になるように、テーブルを 0 から開始したいと考えています。

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}"/>&#44;&nbsp;<c:out value="${item.playersFirstName}"/>
                &nbsp;</td>
                <td align="center" class="listtd" style="font-size:14px; border:2px; bordercolor:#000000;">
                <c:out value="${item.playersPoints}"/>
                &nbsp;</td>
                <td align="center" class="listtd" style="font-size:14px; border:2px; bordercolor:#000000;">
                <c:out value="${item.playersWins}"/>
                &nbsp;</td>
            </tr>
        </c:forEach>
    </table>
        <br/>
        <br/>
        <br/>
    </div>   
</body>
</html>
4

1 に答える 1

4

CSS カウンターのデフォルト値は常に 0 であり、それは問題ではありません。問題は、最初の値が検出されたときに値を 1 にインクリメントしていることですtr。

これを解決する方法は複数あります。

  • プロパティ中にカウンタの初期値を -1 として割り当てcounter-resetます。これは、最初に検出されたときに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)。これらのいずれかを使用すると、テーブル内の 2 番目以降のセレクターのみがセレクターに一致することになりtrます。

    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>

  • 最良かつ推奨される解決策:ヘッダーを 内にラップし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>

于 2015-08-05T14:31:34.690 に答える