Tabellenzeilen und Rahmen
MG
- css
Hallo zusammen,
ich habe eine mehrspaltige Tabelle ohne Rahmen. Jetzt möchte ich bei Berührung einer Tabellenzeile diese mit einem Rahmen versehen.
Standardmäßig scheinen <tr>s nur die Bordereigenschaften anzunehmen, wenn border-collapse: collapse für die Tabelle gesetzt ist. Dabei ist jedoch das Problem, dass dann der obere teil des Rahmens (border-top) fehlt.
Beim Mouseover werden linker, rechter und unterer Rahmenteil für die Zeile korrekt angezeigt, nur oben ist nichts. Liegt wahrscheinlich daran, dass collapse die Rahmen zusammenführt, damit keine hässlichen doppelten Linien zwischen den Tabellenzeilen entstehen.
Explizites setzen einer border-top ändert nichts, ich habe auch schon mit margin und padding rumprobiert und gehofft, dass dadurch eventuell die Linie wieder zum Vorschein kommt, hilt aber alles nichts.
Setzt man die Attribute einzeln (border-left, -right etc.) kommt ein Rahmen oben hinzu (!), allerdings fällt dann der untere weg.
Bei der obersten Tabellenzeile ist es natürlich genauso, wie ich es haben möchte.
Im Internet haben sich bisher alle ähnlichen Fragesteller leider mit der Antwort "border-collapse" zufrieden gegeben, das selbe Problem habe ich nicht gefunden.
table
{
margin: auto;
border-collapse: collapse;
}
tr
{
background-color: white;
border-width: 1px;
border-style: solid;
border-color: white;
}
tr:hover
{
background-color: #fafdff;
border-width: 1px;
border-style: solid;
border-color: #c6d8e4;
}
Gruß,
Michael
check this out:
table{ border-collapse:collapse; }
tr{ border:5px dotted transparent; }
tr:hover{ border:5px solid red; }
Die Umstellung des Linienstils ist der Trick.
mfg Beat
check this out:
table{ border-collapse:collapse; }
tr{ border:5px dotted transparent; }
tr:hover{ border:5px solid red; }
> Die Umstellung des Linienstils ist der Trick.
>
> mfg Beat
Was zum...?
Wenn du mir jetzt noch sagen könntest, wie man darauf kommt bzw. was sich dabei gedacht wurde...
Aber vielen Dank :-)
Gruß,
Michael
Das steht in selfhtml ;-)
Wenn du was bestehendes nachvollziehen willst, schau einfach unter den betrefenden Stichwörtern nach.
Um selber drauf zu kommen muss man schon etwas mehr und grundlegender über CSS wissen. Da gibts keinen Fragenkatalog, wo man unter "Tabellenzelle beim drüberfahren" nachschauen kann.
Irgendwann weißt du dass du Rahmen mit CSS bearbeiten kannst und das hover Schlüsselwort kennst du dann auch. Was dann zu tun ist, ergibt sich daraus.
Das steht in selfhtml ;-)
Wenn du was bestehendes nachvollziehen willst, schau einfach unter den betrefenden Stichwörtern nach.
Um selber drauf zu kommen muss man schon etwas mehr und grundlegender über CSS wissen. Da gibts keinen Fragenkatalog, wo man unter "Tabellenzelle beim drüberfahren" nachschauen kann.
Irgendwann weißt du dass du Rahmen mit CSS bearbeiten kannst und das hover Schlüsselwort kennst du dann auch. Was dann zu tun ist, ergibt sich daraus.
Hallo,
so meinte ich das nicht. Ich würde mich schon als sehr fit in CSS bezeichnen,
nur warum
border:5px dotted transparent;
funktioniert, das selbe mit solid als border-style jedoch nicht, ist mir ein Rätsel.
Gruß,
Michael
Das steht in selfhtml ;-)
Wenn du was bestehendes nachvollziehen willst, schau einfach unter den betrefenden Stichwörtern nach.
Um selber drauf zu kommen muss man schon etwas mehr und grundlegender über CSS wissen. Da gibts keinen Fragenkatalog, wo man unter "Tabellenzelle beim drüberfahren" nachschauen kann.
Irgendwann weißt du dass du Rahmen mit CSS bearbeiten kannst und das hover Schlüsselwort kennst du dann auch. Was dann zu tun ist, ergibt sich daraus.Hallo,
so meinte ich das nicht. Ich würde mich schon als sehr fit in CSS bezeichnen,
nur warum
border:5px dotted transparent;
funktioniert, das selbe mit solid als border-style jedoch nicht, ist mir ein Rätsel.
Ich habe die Variante experimentell gefunden.
Es gibt im CSS 2.1 Standard aber einen Abschnitt über
http://www.w3.org/TR/CSS21/tables.html#border-conflict-resolution
"4.If border styles differ only in color, then a style set on a cell wins over one on a row, which wins over a row group, column, column group and, lastly, table. When two elements of the same type conflict, then the one further to the left (if the table's 'direction' is 'ltr'; right, if it is 'rtl') and further to the top wins. "
mfg Beat
Das steht in selfhtml ;-)
Wenn du was bestehendes nachvollziehen willst, schau einfach unter den betrefenden Stichwörtern nach.
Um selber drauf zu kommen muss man schon etwas mehr und grundlegender über CSS wissen.
Da gibts keinen Fragenkatalog, wo man unter "Tabellenzelle beim drüberfahren" nachschauen kann.
Irgendwann weißt du dass du Rahmen mit CSS bearbeiten kannst und das hover Schlüsselwort kennst du dann auch. Was dann zu tun ist, ergibt sich daraus.
Dein Sarkasmus war auch schon besser.
mfg Beat
Dein Sarkasmus war auch schon besser.
Das schlimme daran ist, ich hab das ernst gemeint.
Die Frage hörte sich für mich wirklich so an als wollte der Fragesteller wissen, wie man auf die CSS Schlüsselwörter kommt.
So kanns gehen :-)