Navigation

    Logo
    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unread
    • Categories
    • Unreplied
    • Popular
    • GitHub
    • Docu
    • Hilfe
    1. Home
    2. Deutsch
    3. Einsteigerfragen
    4. CSS Tabelle formatieren

    NEWS

    • ioBroker@Smart Living Forum Solingen, 14.06. - Agenda added

    • ioBroker goes Matter ... Matter Adapter in Stable

    • Monatsrückblick - April 2025

    CSS Tabelle formatieren

    This topic has been deleted. Only users with topic management privileges can see it.
    • Agrippinenser
      Agrippinenser last edited by Agrippinenser

      .. 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?

      d44b6045-2d34-45e4-9afa-8a28efc61400-image.png

      /*TH Kopfzelle */
      .meinetabelle th {  
       color:orange;
       font-family: Comic Sans MS;
       font-size: 1.2em;
      }
      
      /*einzelne Zelle*/ 
      .meinetabelle td {  
        border-bottom: 0px solid #ddd;
      }
      
      /*Zeile gerade*/ 
      .meinetabelle tr:nth-child(even) {
        background-color: #f1f1f1;
      }
      
      /*Zeile ungerade*/ 
      .meinetabelle tr:nth-child(odd) {
        background-color: #FFFFFF;
      }
      
      

      OliverIO 1 Reply Last reply Reply Quote 0
      • OliverIO
        OliverIO @Agrippinenser last edited by OliverIO

        @agrippinenser

        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.
        591daf24-d148-4d00-847b-e9b8752ad018-image.png
        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?

        Agrippinenser 1 Reply Last reply Reply Quote 0
        • Agrippinenser
          Agrippinenser last edited by

          @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 !

          1 Reply Last reply Reply Quote 0
          • Agrippinenser
            Agrippinenser @OliverIO last edited by

            @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: a9f093bb-5caf-4744-a1f8-e29ed46f8916-image.png

            <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%;">&nbsp;</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%;">&nbsp;</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%;">&nbsp;</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>
            
            OliverIO 1 Reply Last reply Reply Quote -1
            • OliverIO
              OliverIO @Agrippinenser last edited by

              @agrippinenser

              OK ich schaue Mal ob ich dir eine CSS Anweisung baue die alle Möglichkeiten reudiziert
              Und davon ausgehend kann man spielen

              Agrippinenser 1 Reply Last reply Reply Quote 0
              • Agrippinenser
                Agrippinenser @OliverIO last edited by Agrippinenser

                @oliverio

                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.

                69deda67-9f3d-4763-a6dd-46946055bba2-image.png

                Das kann ich so im Script unterbringen. Allerdings weis ich nicht ob es einfacher geht und das hier nur "gefrickelt" ist.

                <table style="border-collapse: collapse;">
                    <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; padding: 0.3em;">
                		<span style="display:flex; color:#f44336; font-size:1.5em; opacity:1; font-weight:bold;">17</span>
                	</td>
                	<td style="padding: 0.1em;">
                		<span style="display:flex; font-size:0.8em; opacity:.8;">Dez</span>
                	</td>
                	<td style="padding: 0.1em;">
                       <span style="display:flex; font-size:0.8em; opacity:.8;">So</span>
                    </td>
                    <td style="padding: 0.1em;">
                      <span style="display:inline-block; width:.8em; height:.8em; background:#fca311; border-radius:50%;">&nbsp;</span>
                    </td>
                    <td style="padding: 0.1em;">
                      <span style='font-size:1.2em;'></span>
                    </td>
                    <td style="padding: 0.1em;">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;padding: 0.1em;">
                       <span style="display:flex; color:inherited; font-size:1.5em; opacity:1; font-weight:bold;">19</span>
                    </td>
                    <td style="padding: 0.1em;">
                       <span style="display:flex; font-size:0.8em; margin-top:0.3em; margin-left:4px; opacity:.8;">Dez</span>
                    </td>
                    <td style="padding: 0.1em;">
                       <span style="display:flex; font-size:0.8em; margin-top:0.3em; opacity:.8;">Do</span>
                    </td>
                    <td style="padding: 0.1em;">
                      <span style="display:inline-block; width:.8em; height:.8em; margin-top:0.3em; background:green; border-radius:50%;">&nbsp;</span>
                    </td>
                    <td style="padding: 0.1em;">
                      <span style='font-size:1.2em;'></span>
                    </td>
                    <td style="padding: 0.1em;">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;padding: 0.1em;">
                       <span style="display:flex; color:inherited; font-size:1.5em; opacity:1; font-weight:bold;">21</span>
                    </td>
                    <td style="padding: 0.1em;">
                       <span style="display:flex; font-size:0.8em; margin-top:0.3em; margin-left:4px; opacity:.8;">Dez</span>
                    </td>
                    <td style="padding: 0.1em;">
                       <span style="display:flex; font-size:0.8em; margin-top:0.3em; opacity:.8;">Do</span>
                    </td>
                    <td style="padding: 0.1em;">
                      <span style="display:inline-block; width:.8em; height:.8em; margin-top:0.3em; background:blue; border-radius:50%;">&nbsp;</span>
                    </td>
                    <td style="padding: 0.1em;">
                      <span style='font-size:1.2em;'></span>
                    </td>
                    <td style="padding: 0.1em;">Termin 2</td>
                    <td><span style="font-size:1.0em; opacity:.8;">17:00-18:00 </span></td>
                    <td></td>
                </tr>
                </body></table>
                

                C OliverIO 2 Replies Last reply Reply Quote 0
                • C
                  Chrunchy @Agrippinenser last edited by

                  @agrippinenser Dein CSS aus dem ersten Post findet keine Anwendung auf deine Tabelle.

                  Du musst die Klasse "meinetabelle" auch zuweisen.

                  <table class="meinetabelle">...
                  
                  1 Reply Last reply Reply Quote 0
                  • OliverIO
                    OliverIO @Agrippinenser last edited by

                    @agrippinenser

                    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/CSS

                    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, was mit so einem selektor genau ausgewählt wird
                    32422af4-0c10-41aa-b99d-8056897f526c-image.png

                    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

                    ad342062-e922-4831-9f74-3fd1f58607b2-image.png

                    Agrippinenser 1 Reply Last reply Reply Quote 1
                    • Agrippinenser
                      Agrippinenser @OliverIO last edited by

                      @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 !

                      1 Reply Last reply Reply Quote 0
                      • First post
                        Last post

                      Support us

                      ioBroker
                      Community Adapters
                      Donate

                      539
                      Online

                      31.7k
                      Users

                      79.8k
                      Topics

                      1.3m
                      Posts

                      css tabelle
                      3
                      9
                      344
                      Loading More Posts
                      • Oldest to Newest
                      • Newest to Oldest
                      • Most Votes
                      Reply
                      • Reply as topic
                      Log in to reply
                      Community
                      Impressum | Datenschutz-Bestimmungen | Nutzungsbedingungen
                      The ioBroker Community 2014-2023
                      logo