Use td:hover, tbody:hover and rowspan together-CodePudding

in the first two rows of the table there are combined cells with the value "Männlich". The hover already works for the whole table but i want to add an other hover when the mouse is over each data. If i put a td:hover under the tbody:hover the datas aren't highlighted.

body {
  font-size: 100%;
  font-family: Arial, Helvetica, sans-serif;
}

div {
  overflow-x: auto;
  /* Dadurch bleibt die Überschrift an derselben Stelle stehen und man kann durch die Tabelle scrollen! */
}


/* Dazu muss Inhalt der Tabelle aber auch breit genug sein -> Zum Testen die Tabelle erweitern! */

table,
th,
td {
  border-collapse: collapse;
}

table {
  width: 100%;
}

tbody:hover td[rowspan],
tr:hover td {
  /* Durch Aufteilung in zwei Bodys geht es, dass die zusammengefügten Zellen markiert werden! */
  background-color: lightblue;
}

th {
  text-align: left;
  background-color: lightgray;
}

th,
td {
  border-bottom: 1px solid lightgrey;
  padding: 5px;
}

<div>
  <table>
    <thead>
      <caption>Kontakte</caption>
      <tr>
        <th>Geschlecht</th>
        <th>Vorname</th>
        <th>Nachname</th>
        <th colspan="2">Adresse</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td rowspan="2">Männlich</td>
        <td>Max</td>
        <td>Mustermann</td>
        <td>Musterstraße</td>
        <td>34</td>
      </tr>
      <tr>
        <td>Hans</td>
        <td>Müller</td>
        <td>Schulstraße</td>
        <td>2</td>
      </tr>
    </tbody>
    <tbody>
      <tr>
        <td>Weiblich</td>
        <td>Petra</td>
        <td>Mustermann</td>
        <td>Musterstraße</td>
        <td>12</td>
      </tr>
    </tbody>
  </table>
</div>

CodePudding user response：

You can try classes!

body {
  font-size: 100%;
  font-family: Arial, Helvetica, sans-serif;
}

div {
  overflow-x: auto;
  /* Dadurch bleibt die Überschrift an derselben Stelle stehen und man kann durch die Tabelle scrollen! */
}


/* Dazu muss Inhalt der Tabelle aber auch breit genug sein -> Zum Testen die Tabelle erweitern! */

table,
th,
td {
  border-collapse: collapse;
}

table {
  width: 100%;
}

tr:hover td {
  /* Durch Aufteilung in zwei Bodys geht es, dass die zusammengefügten Zellen markiert werden! */
  background-color: lightblue;
}

tbody:hover td.left-side {
  background-color: lightgreen;
}

th {
  text-align: left;
  background-color: lightgray;
}

th,
td {
  border-bottom: 1px solid lightgrey;
  padding: 5px;
}

<div>
  <table>
    <thead>
      <caption>Kontakte</caption>
      <tr>
        <th>Geschlecht</th>
        <th>Vorname</th>
        <th>Nachname</th>
        <th colspan="2">Adresse</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td  rowspan="2">Männlich</td>
        <td>Max</td>
        <td>Mustermann</td>
        <td>Musterstraße</td>
        <td>34</td>
      </tr>
      <tr>
        <td>Hans</td>
        <td>Müller</td>
        <td>Schulstraße</td>
        <td>2</td>
      </tr>
    </tbody>
    <tbody>
      <tr>
        <td >Weiblich</td>
        <td>Petra</td>
        <td>Mustermann</td>
        <td>Musterstraße</td>
        <td>12</td>
      </tr>
    </tbody>
  </table>
</div>

CodePudding user response：

You don't need to use !important (which I would not recommend to use as it cannot easily be overwritten), just be more specific by using:

table tbody tr td:hover {
   ...
}

Also get rid of the duplicate <tbody> in your table if you don't need additional and different styling of the rows.

body {
  font-size: 100%;
  font-family: Arial, Helvetica, sans-serif;
}

div {
  overflow-x: auto;
  /* Dadurch bleibt die Überschrift an derselben Stelle stehen und man kann durch die Tabelle scrollen! */
}


table,
th,
td {
  border-collapse: collapse;
}

table {
  width: 100%;
}

tbody:hover td[rowspan],
tr:hover td {
  /* Durch Aufteilung in zwei Bodys geht es, dass die zusammengefügten Zellen markiert werden! */
  background-color: lightblue;
}

table tbody tr td:hover,
table tbody:hover tr td[rowspan]:hover {
  background-color: green;
}

th {
  text-align: left;
  background-color: lightgray;
}

th,
td {
  border-bottom: 1px solid lightgrey;
  padding: 5px;
}

<div>
  <table>
    <thead>
      <caption>Kontakte</caption>
      <tr>
        <th>Geschlecht</th>
        <th>Vorname</th>
        <th>Nachname</th>
        <th colspan="2">Adresse</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td rowspan="2">Männlich</td>
        <td>Max</td>
        <td>Mustermann</td>
        <td>Musterstraße</td>
        <td>34</td>
      </tr>
      <tr>
        <td>Hans</td>
        <td>Müller</td>
        <td>Schulstraße</td>
        <td>2</td>
      </tr>
    </tbody>
    <tbody>
      <tr>
        <td>Weiblich</td>
        <td>Petra</td>
        <td>Mustermann</td>
        <td>Musterstraße</td>
        <td>12</td>
      </tr>
    </tbody>
  </table>
</div>

CodePudding user response：

This is the best I can come up with!

body {
  font-size: 100%;
  font-family: Arial, Helvetica, sans-serif;
}

div {
  overflow-x: auto;
  /* Dadurch bleibt die Überschrift an derselben Stelle stehen und man kann durch die Tabelle scrollen! */
}


/* Dazu muss Inhalt der Tabelle aber auch breit genug sein -> Zum Testen die Tabelle erweitern! */

table,
th,
td {
  border-collapse: collapse;
}

table {
  width: 100%;
}

tbody:hover, tr:hover td {
  /* Durch Aufteilung in zwei Bodys geht es, dass die zusammengefügten Zellen markiert werden! */
  background-color: lightblue;
}

tr:hover td.hover {
  /* Durch Aufteilung in zwei Bodys geht es, dass die zusammengefügten Zellen markiert werden! */
  background-color: red;
}

tbody:hover {
  /* Durch Aufteilung in zwei Bodys geht es, dass die zusammengefügten Zellen markiert werden! */
  background-color: lightblue;
}

th {
  text-align: left;
  background-color: lightgray;
}

th,
td {
  border-bottom: 1px solid lightgrey;
  padding: 5px;
}

<div>
  <table>
    <thead>
      <caption>Kontakte</caption>
      <tr>
        <th>Geschlecht</th>
        <th>Vorname</th>
        <th>Nachname</th>
        <th colspan="2">Adresse</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td rowspan="2">Männlich</td>
        <td >Max</td>
        <td >Mustermann</td>
        <td >Musterstraße</td>
        <td >34</td>
      </tr>
      <tr>
        <td >Hans</td>
        <td >Müller</td>
        <td >Schulstraße</td>
        <td >2</td>
      </tr>
    </tbody>
    <tbody>
      <tr>
        <td>Weiblich</td>
        <td >Petra</td>
        <td >Mustermann</td>
        <td >Musterstraße</td>
        <td >12</td>
      </tr>
    </tbody>
  </table>
</div>