Gunnar Bittersmann: Tabellenreihe Hover - funktioniert nicht in Google Chrome

Beitrag lesen

@@Jeremy:

nuqneH

Hallo!

Mein Spielmannszugsprojekt verwendet CSS, um eine Tabellenreihe beim Hovern hervorzuheben. Im Internet Explorer und im Firefox (jeweils aktuelle Versionen) funktioniert das wie gewünscht, in Googles Chrome nicht (ebenso aktuelle Version).

Safari ist ebenfalls betroffen. Scheint ein Webkit-Bug zu sein, nicht mit 'outline' für 'tr' klarzukommen.

Codeschnipsel:

Da räumen wir gleich mal auf.

Stilangaben haben im Markup nichts zu suchen, @style-Attribute sind böse.[tm] Gib sämtliche Darstellung im Stylesheet an!

@class="row" für 'tr'-Elemente ist unsinnig; eine Tabellenzeile ist bereits durch 'tr' als solche ausgezeichnet.

Die Verwendung von 'thead' und 'tbody' bietet sich an. (Soll der Hover-Effekt nicht nur bei den Datenzeilen sein, nicht aber beim Tabellenkopf?) Auch bietet es sich an, Kopfzellen in Tabellenzeilen als 'th' auszuzeichnen.

'a[@name]' für Anker? Das ist seit (gefühlten) Jahrzehneten <http://de.selfhtml.org/html/verweise/projektintern.htm#anker@title=nicht mehr notwendig>, wenn du den 'th'-Elementen oder besser den 'tr'-Elementen @id gibst (die allerdings mit einem Buchstaben [A-Za-z] beginnen müssen).

Außerdem ist es weder notwendig noch sinnvoll, 'ö' als '&ouml;' zu notieren.

<table>  
    <colgroup>  
        <col/>  
        <col/>  
    </colgroup>  
    <thead>  
        <tr>  
            <th>Datum</th>  
            <th>Ort</th>  
        </tr>  
    <thead>  
    <tbody>  
        <tr id="d16.01.">  
            <th>16.01.</a></th>  
            <td>Schipperhöge Lauenburg</td>  
        </tr>  
        <tr id="d01.05.">  
            <th>01.05.</a></th>  
            <td>Maibaumaufstellung Ratzeburg</td>  
        </tr>  
        <tr id="d07.05.">  
            <th>07.05.</a></th>  
            <td>Sportlerehrung Ratzeburg</td>  
        </tr>  
    </tbody>  
</table>
col:first-child  
{  
    width: 30%;  
}  
  
col:last-child  
{  
    width: 70%;  
}  
  
tbody  
{  
    color: gray;  
}  
  
th, td  
{  
    text-align: left;  
}

Hat jemand eine Idee?

Ja. Wenn es mit 'outline' nicht klappt, musst du halt 'border' nehmen. Dazu ist das richtige Rahmenmodell [CSS2 §17.6] zu wählen.

Damit der Rahmen der gehoverten Zeile nicht von von dem der vorigen Zeile überdeckt wird, ist 'border-bottom width' auf 0 zu setzen; außer für die letzte Zeile, damit beim Hovern dieser Zeile nachfolgender Inhalt nicht hüpft.

Beim Hovern wird auch 'border-bottom width' auf 1px gesetzt und die Farbe von transparent auf die gewünschte umgeschaltet.

table  
{  
    border-collapse: collapse;  
}  
  
tr  
{  
    border-color: transparent;  
    border-style: solid;  
    border-width: 1px 1px 0 1px;  
}  
  
tr:last-child  
{  
    border-width: 1px;  
}  
  
tbody tr:hover  
{  
    border-color: #900;  
    border-width: 1px;  
}

Qapla'

--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain)