Таблица с эффектом Rowspan Hover и Zebra

Я пытаюсь создать таблицу, которая имеет диапазон строк, эффект зебры и выделяет строку при наведении. У меня вроде заработало, но не совсем.

Это должно быть так: http://codepen.io/chriscoyier/pen/wLGDz плюс эффект зебры на строках. К сожалению, эффект зебры с использованием jQuery или CSS не работает для меня, поскольку линии не будут меняться при наведении, если я это сделаю.

Какие-либо предложения? <код>


css hover css-tables
person rhslogic    schedule 17.03.2013    source источник
comment
Вы можете использовать Bootstrap, поскольку все это встроено в него: twitter.github.com /bootstrap/base-css.html#tables   -  person Billy Moat    schedule 17.03.2013

Ответы (2)


arrow_upward
51
arrow_downward

Это задание для 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>

person cimmanon    schedule 17.03.2013
comment
tksss 'tbody: hover td [rowspan], tr: hover td { background: red; }' - person Fábio Zangirolami; 27.02.2016
comment
Работай как шарм - person Y.G.J; 12.06.2019
comment
Ты ангел? - person Ynot; 09.06.2020

arrow_upward
-1
arrow_downward

Что-то вроде:

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

должно сработать. Опубликуйте свой код.

person Bob    schedule 17.03.2013