CSS Tabelle formatieren
-
.. css ist für mich Schwerarbeit, vielleicht kann jemand helfen.
Soweit habe ich das hin "gefummelt" aber wie bekomme ich die weißen Ränder links oder rechts weg?
-
das ist etwas schwer zu sagen.
dein pfeil zeigt auf einen grauen bereich.
das css hilft erst auch mal nicht weiter, da ja dein genereller hintergrund weiß ist.
wahrscheinlich ist es ein element, das um diese tabellenzeilen drum herum ist.
das musst du erst einmal herausfinden. dann kann man schauen ob das padding oder margin ist oder gar freie positionierung, das ist aber eher unwahrscheinlich.das element herausfinden kannst du über die webdeveloper tools, die du mit F12 aufrufen kannst. Im Reiter Elements gibt es ein Elementauswahltool. Das nimmst du und versuchst mit der Maus so genau wie möglich zu treffen. Beim darüberschweben werden die Elemente entsprechend hervorgehoben.
Wenn du es markiert hast, dann zeigt es das element auch direkt im html elementebaum an. auf der rechten seite werden die aktuell geltenden css regeln angezeigt. da kannst dann mal schauen ob padding, margin mit dabei ist und kannst die direkt life überschreiben.
wenn du für das richtige element die richtigen regeln gefunden hast, muss man schauen, wie man die richtige css selektor regel definiert, dass genau das/die richtigen elemente getroffen werden. aber bis dahin musst du erst einmal selbst schauen oder ist das ein bekanntes widget? können wir das irgendwie nachstellen? -
@oliverio sagte in CSS Tabelle formatieren:
viele Dank Webtools usw. !
dein pfeil zeigt auf einen grauen bereich.
das css hilft erst auch mal nicht weiter, da ja dein genereller hintergrund weiß ist.sorry für die verschwommene Untermalung meiner Frage
webdeveloper tools
Wenn du es markiert hast, dann zeigt es das element auch direkt im html elementebaum an.Das braucht eine Zeit !
-
@oliverio sagte in CSS Tabelle formatieren:
erden. aber bis dahin musst du erst einmal selbst schauen oder ist das ein bekanntes widget? können wir das irgendwie nachstellen?
Noch einmal vielen Dank !
heute habe ich mittels DevTool versucht, den Ursprung des hellen Rahmes zu bestimmen. Es ist mir nicht gelungen, es fehlt mir einfach ein CSS Talent.
Das Widget an sich ist ein einfaches HTML Widget. Der Inhalt wird von einem Script von Uhula generiert.
Ich hatte es zum Neuaufsetzten für VIS2 ein klein wenig geändert (alle class="mdui* Farbanweisungen" entfernt).Zur Veranschaulichung habe ich ein farbiges Widget hinterlegt. Der Rahmen ist anscheinend transparent oder die Zellen schweben mit Abstand nebeneinander,- ich weis es nicht
So sieht das aus:
<table><thead><tr> <th style="text-align:right;"></th> <th style="text-align:left;"></th> <th style="text-align:left;"></th> <th style="text-align:left;"></th> <th style="text-align:left;"></th> <th style="text-align:left; min-width:12em;">Betreff</th> <th style="text-align:left;">Zeit</th> <th style="text-align:left;"></th> </tr> </thead> <tbody> <tr> <td style="text-align:right;"> <span style="display:flex; color:#f44336; font-size:1.5em; opacity:1; font-weight:bold;">17</span> </td> <td> <span style="display:flex; font-size:0.8em; margin-top:0.3em; margin-left:4px; opacity:.8;">Dez</span> </td> <td> <span style="display:flex; font-size:0.8em; margin-top:0.3em; opacity:.8;">So</span> </td> <td> <span style="display:inline-block; width:.8em; height:.8em; margin-top:0.3em; background:#fca311; border-radius:50%;"> </span> </td> <td> <span style='font-size:1.2em;'></span> </td> <td>Dritter Advent</td> <td><span style="font-size:1.0em; opacity:.8;">ganztägig</span></td> <td></td> </tr><tr> <td style="text-align:right;"> <span style="display:flex; color:inherited; font-size:1.5em; opacity:1; font-weight:bold;">19</span> </td> <td> <span style="display:flex; font-size:0.8em; margin-top:0.3em; margin-left:4px; opacity:.8;">Dez</span> </td> <td> <span style="display:flex; font-size:0.8em; margin-top:0.3em; opacity:.8;">Do</span> </td> <td> <span style="display:inline-block; width:.8em; height:.8em; margin-top:0.3em; background:green; border-radius:50%;"> </span> </td> <td> <span style='font-size:1.2em;'></span> </td> <td>Termin 1</td> <td><span style="font-size:1.0em; opacity:.8;">17:00-18:00 </span></td> <td></td> </tr><tr> <td style="text-align:right;"> <span style="display:flex; color:inherited; font-size:1.5em; opacity:1; font-weight:bold;">21</span> </td> <td> <span style="display:flex; font-size:0.8em; margin-top:0.3em; margin-left:4px; opacity:.8;">Dez</span> </td> <td> <span style="display:flex; font-size:0.8em; margin-top:0.3em; opacity:.8;">Do</span> </td> <td> <span style="display:inline-block; width:.8em; height:.8em; margin-top:0.3em; background:blue; border-radius:50%;"> </span> </td> <td> <span style='font-size:1.2em;'></span> </td> <td>Termin 2</td> <td><span style="font-size:1.0em; opacity:.8;">17:00-18:00 </span></td> <td></td> </tr> </body></table> -
OK ich schaue Mal ob ich dir eine CSS Anweisung baue die alle Möglichkeiten reudiziert
Und davon ausgehend kann man spielen -
das beschäftigt mich nun doch noch und fand gerade hier etwas über Cellpadding und Cellspacing.
Dann das
<table>Element durch<table style="border-collapse: collapse;">sowie
alle folgenden<td>Elemente durch<td > style="padding: 0.1em;">ersetzt.Das ergibt dann eine brauchbare Darstellung.
Das kann ich so im Script unterbringen. Allerdings weis ich nicht ob es einfacher geht und das hier nur "gefrickelt" ist.
-
@agrippinenser Dein CSS aus dem ersten Post findet keine Anwendung auf deine Tabelle.
Du musst die Klasse "meinetabelle" auch zuweisen.
<table class="meinetabelle">... -
ja genau.
so wie oben geschrieben kann es padding, margin bzw. auch border-width sein, was abstände zwischen den einzelnen Zellen erzeugen kann.du hast jetzt die anweisung direkt zu den html elementen geschrieben. das kann man machen, ist aber aus meinen augen nicht so schön lesbar. da sind css klassen besser.
css klassen ist so etwas wie bei word die formatierung wie bspw "Überschrift1". da kann man seinen ganzen formatierungen einen Namen zuordnen und alles definieren.das würde dann ungefähr so aussehen (das ist
.nospace { padding: 0px; margin: 0px; border-width:0px; }an einem element schreibt man dann einfach
<td class="nospace">zumindest wie hier an die td- und th-elemente
eine weitere alternative wäre
#w00000 td,#w00000 th { padding: 0px; margin: 0px; border-width:0px; }da würde der selektor alle td und th elemente innterhalb des widgets auswählen un die formatierung anwenden. da müsste man nichtmal was an das einzelne element dranschreiben.
wenn du dich da mehr einlesen willst, kann ich dir das hier empfehlen
https://wiki.selfhtml.org/wiki/CSSman kann das auch alles selbst direkt life ausprobieren
in den webdeveloper tools kann man in der konsole dann beispielsweise$$("#w00000 td")dann wird einem genau angezeigt, was mit so einem selektor genau ausgewählt wird
wenn man dan auf so ein element klickt, dann springt man genau zu der position und kann alles life ändern. hier rechte seite css den hintergrund einer zelle rot gemacht
-
@oliverio sagte in CSS Tabelle formatieren:
...
man kann das auch alles selbst direkt life ausprobieren
in den webdeveloper tools kann man in der konsole dann beispielsweise
$$("#w00000 td")dann wird einem genau angezeigt,
...oh mein lieber @oliverio, jetzt habe ich in wenigen Stunden mehr dazugelernt als in den Jahren zuvor.
Das Wochenende ist bei mir ausgebucht
Super vielen Dank !
