nicht angemeldet dedlfix
dedlfix
Gunnar Bittersmann
marctrix
Gunnar Bittersmann
dedlfix
dedlfix
dedlfix
Tabellenkalk
dedlfix
Hallo,
sorry für diesen meinen nächsten Thread aber ich hab ein weiteres Problem mit HTMl/CSS.
Ich habe eine Tabelle:
und in dieser Tabelle werden manche Zelle makiert (z.B. die rote). Dabei hab ich das Problem, dass die Zelle nicht vollständig ausgefüllt ist und ich dieses padding nicht wegbekomme.
Wäre euch dankbar für Hilfe.
Danke! Hannes
Tach!
Ich habe eine Tabelle:
und in dieser Tabelle werden manche Zelle makiert (z.B. die rote). Dabei hab ich das Problem, dass die Zelle nicht vollständig ausgefüllt ist und ich dieses padding nicht wegbekomme.
Es gibt grob gesagt zwei Arten von Elementen: Inline und Block. Block-Elemente nehmen die gesamte Breite ein, Inliner nur jeweils für ihren Inhalt. span gehört zu den Inlinern, div zu den Blocks. Ändern kann man diese Default-Eigenschaften mit display: …
dedlfix.
Klappt, Vielen Dank!!
eine kurze Frage hätt ich noch zu dieser Tabelle, Ich hab ja die Tage in meiner Tabelle mit <sub> und <sub> gekennzeichnet. Gibt es eine einfache Möglichkeit, dass ich die Spaltenlinien in dieser Zeile wegbekomme und nur die Border zwischen den Monaten hab?
Danke! Hannes
Tach!
Gibt es eine einfache Möglichkeit, dass ich die Spaltenlinien in dieser Zeile wegbekomme und nur die Border zwischen den Monaten hab?
Setz die Ränder nur da wo du sie haben möchtest und nicht generell für alle Zellen. Die Namen der Mitarbeiter sind vermutlich auch Kopfzellen, gib ihnen th statt td. Und dann reicht es im Wesentlichen schon, nur th und table zu berahmen. Außerdem kann man die border auch auf einzelne Seiten geschränken: border-top, border-right, …
dedlfix.
@@Hannes Weninger
Bitte verwende für CSS-Probleme nicht JSFiddle.
und in dieser Tabelle werden manche Zelle makiert (z.B. die rote).
Nö, da ist keine Zelle markiert; ein td wie jedes andere. Du hast deren Inhalt markiert – nein, nicht einmal das; zum Markieren wären Elemente wie mark, em etc. da, nicht das bedeutungslose span.
Möchtest du nun die Zellen markieren oder die Inhalte? Für den zweiten Fall: für das entsprechende Element (das wie gesagt kein span sein sollte) display: inline-block; width: 100%.
BTW, dieses Markup scheint mir auch nicht korrekt:
<tr> <th>Zeit</th> <th><sub>1</sub></th> <th><sup>2</sup></th> <th><sub>3</sub></th> <th><sup>4</sup></th> <th><sub>5</sub></th> <th><sup>6</sup></th> <th><sub>7</sub></th> </tr>
Die abwechselnde Hoch-/Tiefstellung hat keine semantische Funktion – sollte sich also nicht im Markup wiederfinden –, sondern dient allein der Darstellung – wäre also mit CSS zu lösen:
<tr>
<th>Zeit</th>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
<th>6</th>
<th>7</th>
</tr>
.absenceTable thead tr:last-child th:nth-child(even)
{
font-size: 0.8em;
padding-top: 0.5em;
}
.absenceTable thead tr:last-child th:nth-child(odd):not(:first-child)
{
font-size: 0.8em;
padding-bottom: 0.5em;
}
Für Menschen mag das so besser lesbar sein, für den Browser schreibt man’s besser so:
.absenceTable thead tr:last-child th:nth-child(even)
{
font-size: 0.8em;
padding-top: 0.5em;
}
.absenceTable thead tr:last-child th:nth-child(2n+3)
{
font-size: 0.8em;
padding-bottom: 0.5em;
}
LLAP 🖖
Hej Gunnar,
Frage:
Möchtest du nun die Zellen markieren oder die Inhalte? Für den zweiten Fall: für das entsprechende Element (das wie gesagt kein
spansein sollte)display: inline-block; width: 100%.
Spricht was gegen
display: block;
Marc
@@marctrix
Spricht was gegen
display: block;
Vermutlich nicht.
LLAP 🖖
Hallo,
danke für die Antworten. Ich hab das Beispiel jetzt mal so gemacht wie ichs benötige:
Ich bin mir jetzt aber nicht sicher, ob ich die Daten vom Server so liefern soll, da ich z.B. ein ganzes Jahr anzeigen können möchte und ich dann z.B. die Variable "userObjectOktoberAndNovember1" in meinem Beispiel am Server für das ganze Jahr aufbereiten muss.
Auf der anderen Seite ist der Seitenaufbau im Browser sicher am schneller als wenn ich das Jahresarray z.B. mit concat am Client aufbauen müsste.
Was sagt ihr dazu. Ich wäre sehr dankbar für Anregungen bzgl. Verbesserungen o.ä. Es soll auf jeden Fall im Frontend performant sein. Im Backend mach ich mir keine sorgen, da ist das meiste was ich bis jetzt gemacht habe - auch größere Berechnungen, Mappings usw. meistens sehr schnell.
Danke! Hannes
Tach!
Ich bin mir jetzt aber nicht sicher, ob ich die Daten vom Server so liefern soll, da ich z.B. ein ganzes Jahr anzeigen können möchte [...]
Ich würde mir erstmal keine großen Gedanken dazu machen, solange nicht Daten in der Größenordnung von Megabyte oder so zu verarbeiten sind.
dedlfix.
Ich bin mir jetzt aber nicht sicher, ob ich die Daten vom Server so liefern soll, da ich z.B. ein ganzes Jahr anzeigen können möchte [...]
Ich würde mir erstmal keine großen Gedanken dazu machen, solange nicht Daten in der Größenordnung von Megabyte oder so zu verarbeiten sind.
Wär das für dich so ok, wenn man das so macht oder würdest du es anders machen? Danke! Hannes
Tach!
Wär das für dich so ok, wenn man das so macht oder würdest du es anders machen?
Ich kann dir keine konkrete Antwort geben, weil ich dein Projekt und eventuelle Begleitumstände nicht kenne. Ich kann nur soviel sagen, dass man sich meist zu viele Gedanken um die Performance macht, besonders wenn einem das Bauchgefühl fehlt, wie sich welche Datenmengen beim Verarbeiten verhalten. Heutzutage ist es wesentlich wichtiger, auf Wartbarkeit Wert zu legen und für Menschen verständlichen Code zu erstellen. Performanceproblemen kann man hinterher immer noch in Angriff nehmen, wenn sie sich zeigen. Und dann sollte man eine verständliche Programm- und Datenstruktur haben, die einem keine große Schwierigkeiten in den Weg legt, weil beispielsweise alles viel zu sehr kreuz und quer voneinander abhängig ist.
dedlfix.
Ich tu mir mit dem unheimlich schwer:
var userObjectOktoberAndNovember1 = ['0','0','0','0','1','0','1','0','0','1','0','0','1','0','0','0','0','0','0','1','0','0'];
weil das jetzt mal okt und nov ist, aber auch dann in weiterer folge ein Jahr beinhalten kann und das wird dann ziemlich unübersichtlich. Ich bin mir jetzt nicht sicher ob ich concat im frontend verwenden soll ob das ganze im Frontend zusammenzuführen und dann mit ng-repeat über die daten iteriere.
Tach!
Ich tu mir mit dem unheimlich schwer:
var userObjectOktoberAndNovember1 = ['0','0','0','0','1','0','1','0','0','1','0','0','1','0','0','0','0','0','0','1','0','0'];weil das jetzt mal okt und nov ist, aber auch dann in weiterer folge ein Jahr beinhalten kann und das wird dann ziemlich unübersichtlich. Ich bin mir jetzt nicht sicher ob ich concat im frontend verwenden soll ob das ganze im Frontend zusammenzuführen und dann mit ng-repeat über die daten iteriere.
Es ist vermutlich gehüpft wie gesprungen ob du die Daten in einem Stück oder in mehreren übergibst. Das ändert an ihrer Menge nichts. Für ng-repeat brauchst du sie sowieso im Ganzen. Ein zusätzliches Zusammenfügen am Client ist lediglich Mehrarbeit, wenn auch nur geringe. Der Code allerdings, um die Daten zu trennen und wieder zusammenzufügen kostet allerdings Wartung und das ist sicher vermeidbar.
Viel eher stellt sich mir eine Frage bei der Darstellung der Menge an Daten. Wenn du dabei drüber nachdenkst, ein scrollbares Element einzufügen, weil gar nicht alles auf die Seite passt, dann löst sich vielleicht das andere Problem dadurch auf, dass du ein Virtual-Element verwendest, das sich um die Darstellung kümmert und selbst entscheidet, welche anzuzeigenden Daten nachgeladen werden müssen. Ich hab neulich bei Angular Material das Virtual Repeat gefunden, das sich darum kümmert (siehe unter Demos). Falls du diese Komponente einzusetzen gedenkst, musst du die Datenübergabe sowieso mehr oder weniger so gestalten, wie es diese Komponente benötigt. Allerdings hab ich Angular Material noch nicht selbst eingesetzt.
dedlfix.
Hallo,
var userObjectOktoberAndNovember1 = ['0','0','0','0','1','0','1','0','0','1','0','0','1','0','0','0','0','0','0','1','0','0'];
du hast, glaub ich, noch nicht erzählt was du hier speicherst, aber das da sieht aus, als ob du eigentlich eine Binärzahl zum Speichern der Wahrheitswerte nehmen möchtest.
Gruß
Kalk
Tach!
var userObjectOktoberAndNovember1 = ['0','0','0','0','1','0','1','0','0','1','0','0','1','0','0','0','0','0','0','1','0','0'];du hast, glaub ich, noch nicht erzählt was du hier speicherst, aber das da sieht aus, als ob du eigentlich eine Binärzahl zum Speichern der Wahrheitswerte nehmen möchtest.
Ach ja, auf alle Fälle könnten die Anführungszeichen weg, das schrumpft die Datenmenge von drei Zeichen auf eins. Kleiner (also auf Bitebene gehen) würde ich das nicht mehr machen, das ist mehr Fummelei als dass es groß was bringt.
dedlfix.