9

行スパン、ゼブラ効果があり、ホバー時に行を強調表示するテーブルを作成しようとしています。ある程度は機能しましたが、完全ではありません。

次のようにする必要があります: http://codepen.io/chriscoyier/pen/wLGDzプラス行のゼブラ効果。残念ながら、jQuery または CSS を使用したシマウマ効果は機能しません。これを行うと、ホバー時に線が変化しないためです。

助言がありますか？

4

2 に答える 2

51

これは のための仕事ですtbody。複数の tbody 要素は、少なくとも HTML4 までさかのぼってテーブルで許可されており、関連する行をグループ化するために設計されています。この方法では、JavaScript はまったく必要ありません。

body {
  padding: 1em;
}

table {
  width: 100%;
  border-collapse: collapse;
}

td,
th {
  padding: .25em;
  border: 1px solid black;
}

tbody:nth-child(odd) {
  background: #CCC;
}

tbody:hover td[rowspan],
tr:hover td {
  background: red;
}
<table>
  <tbody>
    <tr>
      <td rowspan="3"></td>
      <td>a</td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td>b</td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td>c</td>
      <td></td>
      <td></td>
    </tr>
  </tbody>

  <tbody>
    <tr>
      <td rowspan="3"></td>
      <td>a</td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td>b</td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td>c</td>
      <td></td>
      <td></td>
    </tr>
  </tbody>

  <tbody>
    <tr>
      <td rowspan="3"></td>
      <td>a</td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td>b</td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td>c</td>
      <td></td>
      <td></td>
    </tr>
  </tbody>
</table>

于 2013-03-17T19:09:42.743 に答える
-2

何かのようなもの：

// stripe
tr:nth-child(even) {
    background-color: #ccc;
}
// hover
tr:hover {
     background-color: #c00;
}

動作するはずです。コードを投稿してください。

于 2013-03-17T18:59:50.357 に答える