Gradient in Tabelle

[Rolf b]

Ich möchte quer über eine Tabellenzeile einen Farbverlauf machen (ohne dabei zu hexen, indem ich die Gradienten pro Zelle mit Farbzwischenwerten neu aufsetze).

So wie im Fiddle geht's nicht, weil sich der Verlauf pro Zelle wiederholt. Die Lösung, die man anderswo findet, nämlich background-attachment:fixed, gefällt mir nicht weil sie sich auf die Breite des Viewport bezieht, nicht auf die Breite der Tabelle.

Kennt jemand eine bessere Lösung? Zur Zeit habe ich für mich den Gradienten einfach nach oben gedreht, dann fällt's nicht auf, aber ich würde den Verlauf gern von links nach rechts haben.

Das hier steht im Fiddle:

<table>
<tr>
  <td>Der Herr der Ringe</td><td>J.R.R. Tolkien</td><td>Peter Jackson</td>
</tr>
<tr>
  <td>His Majesty's Dragon</td><td>Naomi Novik</td><td><strike>Peter Jackson</strike>, leider</td>
</tr>
</table>

table {
  border-collapse: collapse; border: 3px solid black;
  width: 80%; margin: 0 auto;
}

tr:hover { background: linear-gradient(to right, #aaa, #faa); }

td { border-top: 2px dotted black; }

Rolf

[Gunnar Bittersmann]

@@Rolf b

So wie im Fiddle geht's nicht, weil sich der Verlauf pro Zelle wiederholt.

??

Kennt jemand eine bessere Lösung?

Kennt jemand das Problem?

LLAP 🖖

[Camping_RIDER]

Aloha ;)

So wie im Fiddle geht's nicht, weil sich der Verlauf pro Zelle wiederholt.

??

Siehe „problematische Seite“ 😉

Grüße,

RIDER

[Gunnar Bittersmann]

@@Camping_RIDER

So wie im Fiddle geht's nicht, weil sich der Verlauf pro Zelle wiederholt.

??

Siehe „problematische Seite“ 😉

Da habe ich gesehen und nichts gesehen.

Siehe Thread. 😉

LLAP 🖖

[Camping_RIDER]

Aloha ;)

So wie im Fiddle geht's nicht, weil sich der Verlauf pro Zelle wiederholt.

??

Siehe „problematische Seite“ 😉

Da habe ich gesehen und nichts gesehen.

Ich nicht gleich und bezog deine Frage deshalb darauf 😂

Siehe Thread. 😉

I see 😉

Grüße,

RIDER

[MrMurphy1]

Hallo

Ich konnte dein Problem zuerst nicht nachvollziehen.

Im Firefox funktioniert die Anzeige offensichtlich wie von dir erwartet.

Im Chrome, Opera und IE11 wohl nicht. Wobei der IE11 den Gradienten wiederum anders als Chrome und Opera anzeigt.

Hast du es mal mit Präfixen probiert?

Gruss

MrMurphy

[MudGuard]

Hi,

So wie im Fiddle geht's nicht, weil sich der Verlauf pro Zelle wiederholt.

nicht bei mir, da gibt's einen Verlauf über die ganze Tabellenzeile.

cu,
Andreas a/k/a MudGuard

[Rolf b]

Ok, FF machts offenbar anders, ich hatte es mir erstmal nur in Chrome angeguckt.

In Chrome müsste ich -webkit- davorschreiben, gelle? Aber dann bringt Chrome gar keine Hover-Farbe mehr.

IE ist ja ganz schrecklich. Sieht aus, als hätte jemand die Bugs im Browser mit der Dampfwalze überfahren.

Rolf

[Gunnar Bittersmann]

@@Rolf b

Ok, FF machts offenbar anders, ich hatte es mir erstmal nur in Chrome angeguckt.

OK, bei mir andersrum. Hast du den Webkit/Blink-Bug schon gemeldet?

In Chrome müsste ich -webkit- davorschreiben, gelle?

Nein, Präfixe sind bei linear-gradient schon lange out.

Aber dann bringt Chrome gar keine Hover-Farbe mehr.

Bei der experimentellen Vorstufe gab es noch kein to right.

LLAP 🖖

[MrMurphy1]

Hallo

Das sind die üblichen Probleme wenn Tabellen zum Layouten mißbraucht werden.

Du hast jedoch Listendaten, die in einer Tabellendarstellung angezeigt werden sollen. Dadurch entstehen viele Probleme, die dann vollkommen überflüssigerweise korrigiert werden müssen.

Dafür ist das dl-Element erdacht worden. Ich habe mal eine Beispielseite erstellt:

dl-Element mit linear-gradient

Gruss

MrMurphy

[Matthias Apsel]

Hallo MrMurphy1,

Du hast jedoch Listendaten, die in einer Tabellendarstellung angezeigt werden sollen.

Das würde ich in dieser Absolutheit nicht sagen, aber das weißt du ja sicher.

Zugegeben, die Tabelle mag nur ein Ausschnitt sein, aber es lassen sich eindeutig Spaltenüberschriften finden, vielleicht soll die Tabelle sortierbar sein. Informationen und Zusammenhänge, die die Beschreibungsliste nicht liefern kann.

Bis demnächst
Matthias

[Rolf b]

Nein, ich habe eine Tabelle mit 3 Spalten. Eine Liste zeichnet sich durch das n-fache Auftreten von relativ unstrukturierten Inhalten aus. Eine DL (description list) definiert oder beschreibt Dinge, ist also vorzugsweise für Key-Value Datenstrukturen interessant. Der Value-Teil ist wiederum unstrukturiert.

Das sagt W3C dazu:

The dt element represents a term, part of a term-description group in a description list
The dd element represents a description, part of a term-description group in a description list

Vorteil einer Table ist auch, dass sie ihre Spaltenbreiten an Hand der Inhalte variieren kann. Das geht mit einer dl nicht (zumindest nicht einheitlich über alle Zeilen).

Aber vielleicht bin ich durch 25 Jahre Büroarbeit mit Excel auch einfach verdorben worden 😉

Rolf

[MrMurphy1]

Hallo

Aber vielleicht bin ich durch 25 Jahre Büroarbeit mit Excel auch einfach verdorben worden

Richtig erkannt.

Gruss

MrMurphy

[Rolf b]

Hm, oder du hast auf auf dem Rückweg von Jahren des Tabellenlayouts derart beschleunigt, dass Du über's Ziel hinausschießt. Und nun wird für mich die Frage akut, ob und wann das table-Element überhaupt noch eine Existenzberechtigung hat.

Es ist ja nicht so, dass ich mich nicht mit der Frage beschäftigt hätte. Es gibt Stimmen unterschiedlicher Radikalität zu diesem Thema. Auf quora.com fand ich die Frage "When is it appropriate to use tables in HTML?"

Die Antwort von Asa Dotzler, "worker bee at mozilla" war 2011:

If you can look at the contents of the table and say to yourself, all of the items in this particular column share something in common that makes them distinct from those other columns AND all the items in this particular row share something in common that makes them distinct from those other rows, then you probably have tabular data and it probably makes sense to organize it in a table.

Eine andere Antwort lautete: (Chris Kemp, 2012):

Use tables for matrix shaped data, and only when you do not know the shape of the data (how many rows and columns).

Ein anderer Kommentar war (Matt Pusateri, 2011):

If you're using a table to show tabular data, great.

Und ein gewisser Catalin Braescu schrieb:

Moreover, the blind can't read a non-table "table" by the software reading assistants.

Ich lese das so, dass es durchaus Uneinigkeit darüber gibt, was "tabular data" ist und wie nützlich das table Element sein kann.

Die Aussage von Herrn Braescu ist sicherlich mit etwas Salz zu genießen; ich denke, er bezieht sich auf div Wüsten die mit der Brechstange auf Table gestyled werden. Wobei - genau das wird von Jason Graves in seinem Blog als die ultimative Lösung dargestellt.

Bei Dir habe ich den Eindruck, dass Du auf der Linie von Chris Kemp und Jason Graves liegst (bis auf die divs). Was ich durch Suchen nicht so recht finde, ist die Aussage, ob diese Linie Mainstream ist oder eher radikal.

Rolf

[JürgenB]

Hallo Rolf,

irgendwann schrieb (oder zitierte) mal jemand hier im Formum sinngemäß:

Wann immer man ausgiebig und ohne rechtes Ergebnis darüber diskutieren kann, welches Element das richtige ist, ist es eigentliche egal, was man nimmt.

Gruß
Jürgen

[Matthias Apsel]

Hallo JürgenB,

irgendwann schrieb (oder zitierte) mal jemand hier im Formum sinngemäß:

Wann immer man ausgiebig und ohne rechtes Ergebnis darüber diskutieren kann, welches Element das richtige ist, ist es eigentliche egal, was man nimmt.

Mehrere. Mehrmals.

html-semantik.de ist noch frei. Vielleicht sollte man eine Seite schreiben, die durch das Stellen der richtigen Fragen und mithilfe der gegebenen Antworten passende Elemente vorschlägt.

Bis demnächst
Matthias

[Auge]

Hallo

Hm, oder du hast auf auf dem Rückweg von Jahren des Tabellenlayouts derart beschleunigt, dass Du über's Ziel hinausschießt.

MrMurphy hasst Tabellen abgrundtief. Er hasst sie so abgrundtief, dass er im Laufe der Jahre bisher jede Bitte und jede Aufforderung, zu begründen, warum etwas, das für jeden Anderen wie tabellarische Daten aussieht, kein tabellarischer Inhalt sei, missachtet hat. Er ist in Sachen Tabellen ein übler Troll, dessen Ausführungen man in dieser Hinsicht am besten ignoriert.

Und nun wird für mich die Frage akut, ob und wann das table-Element überhaupt noch eine Existenzberechtigung hat.

Musst du nicht. Erst recht nicht, wenn MrMurphy diese in Frage stellt.

Tschö, Auge

[Gunnar Bittersmann]

@@Rolf b

"When is it appropriate to use tables in HTML?"

Ich würde mal ganz pragmatisch sagen: Wenn als Spaltenüberschriften sowas wie key und value in Betracht käme, dann ist dl angebracht.

Wenn Spaltenüberschriften spezifischer sind, dann ist auch bei zwei Spalten table angebracht.

LLAP 🖖

[Gunnar Bittersmann]

@@Rolf b

So wie im Fiddle geht's nicht, weil sich der Verlauf pro Zelle wiederholt.

Einen Gradienten für table (nicht für tbody!) kriegen auch die dummen WebKits und Abkömmlinge hin.

trs setzt du auf weiß (oder was auch immer die Hintergrundfarbe sein soll) und bei :hover auf transparent.

☞ CodePen

(Und das darf durchaus als Anregung verstanden werden, für CSS-Probleme nicht JSFiddle zu verwenden.)

LLAP 🖖

[Rolf b]

Wieso? Der gezeigte Trick funktioniert auch in JSFiddle 😝

Ich muss ehrlich sagen, dass ich mit Codepen nicht warm werde (und warum CodePen vom Namen her das bessere CSS Vehikel sein sollte, erschließt sich mir auch nicht ganz). Die 2x2 Darstellung in JSFiddle finde ich sehr angenehm. Wenn eine Seite in JSFiddle bestimmte CSS Features nicht darstellen könnte, in Codepen aber schon, dann wäre das was anderes.

Einen Bug habe ich nicht gemeldet, ich bin bisher davon ausgegangen dass ich was falsch gemacht habe. Es wäre ja durchaus denkbar, dass die Spec einer table row den Background verbietet und ihn auf die table cells propagiert. Dann wäre das Verhalten von Chrome lästig, aber korrekt.

Rolf

[Gunnar Bittersmann]

@@Rolf b

und warum CodePen vom Namen her das bessere CSS Vehikel sein sollte, erschließt sich mir auch nicht ganz

Weil Änderungen sofort sichtbar sind. (☞ Online testen)

LLAP 🖖