Autor Zpráva
martin b.
Profil *
Ahoj,

neřešil jste někdo tento problém?

Mám tabulku a chci, aby když najedu myší na nějaký řádek, tak se obarvil barvou, ale také se mu změnil border. Nějak nemůžu najít žádné funkční řešení.



table tr:hover td { background: light-grey; border: 1px solid green; }


Funguje to normálně, pokud tabulka samotná nemá border-collapse: collapse;... jak ale udělat jinak, aby buňky byly u sebe a pokud najedu na řádek, tak se změnila i barva ohraničení? Je mi jedno jestli ohraničení celého řádku nebo jednotlivé buňky..

Poradíte mi někdo proím?

děkuju
panther
Profil
martin b.:
Barva „light-grey“ neexistuje, píše se bez pomlčky. Více barev zde, ale lépe naučit se používat hedadecimální zápisy barev, tedy „#d3d3d3“. Jinak v uvedeném zápisu není nic, co by mělo nefungovat.

Vytvoři jsem funkční ukázku problému, funguje všude kromě IE6, která neumí :hover jinde než u odkazů. Tam si snadno doděláš tuto funkčnost přilinkováním hover.htc.
martin b.
Profil *
panther:
Aha, moje chyba. V barvě pomlčka není, psal jsem to z hlavy sem na fórum, ale v tom problém nemám.
A nemám ani problém s uváděným příkladem, problém nastane, pokud tabulce nastavíte
border-collapse: collapse;


to vlastně dá ty řádky na sebe tak, že horní řádek překrývá ten spodní, takže pokud se najede myší na nějaký spodnější řádek (kromě posledního) nebude u buněk obarven horní border, protože je schovaný. Zkoušel jsem jestli by nezabral z-index, ale pokud nastavím něčemu position: relative, tak se border nevykreslí vůbec... (zkoušeno přes fierebug ve FF)
joe
Profil
Vymyslel jsem takové řešení, ale neohraničuje řádek zleva a zprava... Taky jsem jednou už hledal řešení, ale to co jsem napsal, tak to myslím, že je celkem dobré, ne? :-)

<style>

table {
	border-spacing: 0;
	border: 1px solid #d5d5d5;
	width: 150px;
}

/* prvni radek */
tr td {
	border-bottom: 1px solid #fff;
	border-top: 1px solid #fff;
}

/* dalsi radky */
tr+tr td {
	border-bottom: 1px solid #fff;
	border-top: 1px solid #d5d5d5;
}

tr:hover td {
    border-top: 1px solid;
	border-bottom: 1px solid;
    border-color: blue;
}

/* pro IE */
table {
	_border-collapse: collapse;
}

table td {
	_border-top: 1px solid #d5d5d5;
	_border-bottom: 1px solid #d5d5d5;
}

</style>

<table>
  <tr>
    <td>one</td>
    <td>two</td>
  </tr>
  <tr>
    <td>three</td>
    <td>four</td>
  </tr>
  <tr>
    <td>five</td>
    <td>six</td>
  </tr>
</table>

Vaše odpověď

Mohlo by se hodit


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: