border van tabel in meer dan één kleur mogelijk?

Status
Niet open voor verdere reacties.
S

snatz

Gebruiker
Lid geworden
30 dec 2008
Berichten
33
Weet iemand hoe het mogelijk is om van een tabel slechts één specifieke horizontale lijn in een afwijkende kleur te krijgen?

Het gaat mijn erom om ergens een horizontale doorlopende lijn te hebben dwars door de tabel.

Of is dit alleen te doen door de tabel te spitsen in 2 losse tabellen boven elkaar en er een horizontale lijn tussen te zetten?
 
Op die bewuste <TR> een class toevoegen.
HTML: 
<tr class="redline">

Vervolgens in je CSS dit neerzetten
Code: 
.redline {
  border-bottom: 2px solid red;
}
Volgens mij moet dat werken
 
@ Tha devil
Ik denk dat je die class zal moeten toepassen op de <td>
HTML: 
 <td class="redline">
Mvg
Defietser
 
Dan zou je het weer op alle td's in die tr moeten doen. Ik denk dat de tr toch handiger is.
 
@ ErikBooy007
Ik denk dat je hier wat commentaar geeft zonder dat eerst te checken.
een <tr> is een rij (table row).
Een <td> is een cel (table data) en het zijn de borders van de cellen die je kan stylen en niet de borders van de rijen.
Als je de table gaat stylen met een border dan plaats je gewoon een border rond al de cellen. geef je de table een class mee dan zoals in ons geval hier wordt de onderste border rood over de ganse breedte van de tabel.
Kan je hier even mee testen. In dit vb wordt de class .redline toegepast op de eerste rij wat geen resultaat opleverd.
In de 2de rij wordt de class.redline toegepast op de 2 cellen van de 2de rij en daar werkt het wel.

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Naamloos document</title>
<style type="text/css">
<!--
.redline {
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #FF0000;
}
-->
</style>
</head>

<body><table width="150" border="0" cellpadding="0" cellspacing="0" >
  <tr class="redline">
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td class="redline" >&nbsp;</td>
    <td class="redline">&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>

</body>
</html>
Mvg
Defietser
 
Laatst bewerkt:
Hmm vreemd dat dit dan wel werkt
Code: 
tr:hover {
  background: red;
}

Daarom dacht ik dat een border ook moest werken
 
@ Tha Devil
Ja dat wel maar hier maak je geen class je stylt de tr tag die dan een effect heeft op al de tr's in de table('s).
Mvg
Defietser
 
Daar heb jij dan weer ongelijk in.

Het is gewoon zo dat een background wel werkt op een tr en een border niet. Dat heeft niets met class of geen class te maken.
 
We praten hier wel over het stylen van de tr tag nml met een hover, tr: hover, zoals Tha devil aangeeft en niet over het geven van een background_color van de tr tag zelf. Hier hovert hij de tr tag
tr:hover {
background: red;
}
Klik om te vergroten...
zoals je de a tag hovert kan je ook de tr tag hoveren.
Als je nu met je muis over de cellen gaat dan komt die in een andere kleur hier is dat dan rood, Als je nu terug uw muis verplaatst dan komt de originele kleur terug.
Hetgeen wat U zegt is ook waar, je kan de table, de rij (tr) en de cel (td) afzonderlijk een achtergrond kleur geven.
Mvg
Defietser
 
Je kunt (in principe) elk element hoveren. Maar daar gaat het niet om. Het punt van Tha Devil was dat je een <tr> wel een background kunt geven, maar blijkbaar geen border. Het maakt daarbij geen fluit uit of je dat met een class, een id, of gewoon voor alle tr's doet. Dat heeft er echt NIETS mee te maken.
 
Jup dat was mijn punt, de tr:hover werkt wel met een background maar een "border: 1px solid red;" doet ie niet.

Laten we eerst eens afwachten of "Snatz" nog reageert :)

Deze discussie van een hoger niveau is zeer informatief (als je vaker met CSS en xHTML werkt) maar dwaalt af van de oorspronkelijke vraag :)
 
@meerweten: Volgende keer de vraag en reacties goed lezen? :rolleyes:
 
Laten we eerst eens afwachten of "Snatz" nog reageert :)
[ Tha Devil, 31 juli 2009 23:32 ]
Klik om te vergroten...
Om het afwachten wat te veraangenamen, het volgende:
Ik kreeg een blauw vermoeden dat het wel eens met border-collapse toestanden te maken zou kunnen hebben. Dus terug naar de bron:
Gelukkig, CSS is toch niet zo raar dat ze voor tr-borders een uitzondering hebben gemaakt op de universele toepassing die voor alle elementen geldt. :thumb:

Iets verderop staat hoe het werkt: als je table { border-collapse: collapse; } toevoegt, is het wel mogelijk om tabel-rijen in z'n geheel van een border te voorzien.
Met deze kennis gewapend een testpagina gemaakt: de afwijkende tr toont inderdaad een mooie border! :D

Nou ja, het werkt in echte browsers. Internet Explorer laat weer eens verstek gaan: hoe je ook kijkt, in IE6 en IE7 is geen border te zien... - In IE8 doet hij het wel goed.
Even gluren bij Browsershots.com leert dat je het zo gek niet kunt verzinnen, of de browsers geven de correcte weergave: K-Meleon, Minefield, Shiretoko, Flock, oude Opera's en Firefoxen, Chrome, Seamonkey, Safari, Netscape, Iceweasel, Galeon, Kazehakaze, enz. - Alleen de Avant browser doet het ook niet, maar die is meen ik afgeleid van IE.
Dus de conclusie:
  • Om IE lte 7 een kans te geven: gebruik toch niet de <tr> om een tabelrij een border te geven, maar doe het met de <td>'s. Scheelt 2 lettertjes code (en 1 spatie). ;)
Dank voor de aandacht!
CSS-hunter
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan