[CSS] Tabellen

Einklappen
X
 
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • [CSS] Tabellen

    Hi,

    ich habe ein Tabellenproblem. Da Rules im Stylesheet nicht zur Verfügung steht, musst ich eine Alternative wählen. Im Mozilla ging es mit firstchild. Im IE mit expressions.

    Doch beim IE stoße ich mit den Expressions jetzt an meine Grenzen.

    Wie schaffe ich es Tabellen Rahmen zwischen den Zeilen zu haben aber keinen Top und Bottom Border in der Tabelle selbst.
    Lurchi ! Lurchi ! Lurchi !

  • #2
    Hallo,

    Zitat von Anbu Beitrag anzeigen
    Da Rules im Stylesheet nicht zur Verfügung steht, musst ich eine Alternative wählen.
    ich kann dir nicht folgen.

    Zitat von Anbu Beitrag anzeigen
    Wie schaffe ich es Tabellen Rahmen zwischen den Zeilen zu haben aber keinen Top und Bottom Border in der Tabelle selbst.
    Auch das ist etwas schwammig. Meinst du evtl. Rahmen für tr-Elemente?

    Wie auch immer, unbedingt lesen: collapsing borders

    Gruß,

    Amica
    [COLOR="DarkSlateGray"]Hast du die [COLOR="DarkSlateGray"]Grundlagen zur Fehlersuche[/color] gelesen? Hast du Code-Tags benutzt?
    Hast du als URL oder Domain-Beispiele example.com, example.net oder example.org benutzt?
    Super, danke!
    [/COLOR]

    Kommentar


    • #3
      Ok hast mich falsch verstanden

      collapsing borders hat nichts mit meinem Problem zu tun. Ich will einzig und allein Border zwischen jeder Zeile(tr) haben, nicht aber am anfang und ende der Tabelle. Im Prinzip das Css equivalent zu rules="rows".

      Im Mozilla habe ich das Problem mithilfe von Vererbung und firstchild gelöst, im IE habe ich bisjetzt keinen Weg gefunden das zu tun.

      jetzt klarer?
      Lurchi ! Lurchi ! Lurchi !

      Kommentar


      • #4
        Genau das wird dort aber auch behandelt (17.6.2.1 Border conflict resolution). Setz einfach den Rahmen des table-Elements auf
        HTML-Code:
        border: 0 hidden transparent;
        Borders with the 'border-style' of 'hidden' take precedence over all other conflicting borders. Any border with this value suppresses all borders at this location.
        [COLOR="DarkSlateGray"]Hast du die [COLOR="DarkSlateGray"]Grundlagen zur Fehlersuche[/color] gelesen? Hast du Code-Tags benutzt?
        Hast du als URL oder Domain-Beispiele example.com, example.net oder example.org benutzt?
        Super, danke!
        [/COLOR]

        Kommentar


        • #5
          ok vielleicht seh ich grad den Wald vor lauter Bäumen nicht... aber es hat nicht wirklich was gebracht

          Also die definition im Main Stylesheet(Mozilla):
          Code:
          .tabelle-Rahmen-rechts-Zeilen {
          	border-right: 1px solid #000000;
          }
          .tabelle-Rahmen-rechts-Zeilen td {
          	border-top: 1px solid #000000;
          }
          .tabelle-Rahmen-rechts-Zeilen tr:first-child td {
          	border: none;
          }
          Und hier einer meiner Ansätze im IE Stylesheet:
          Code:
          .tabelle-Rahmen-rechts-Zeilen tr td {
          	border-top: expression(this.previousSibling==null?'none':'1px solid #000000');
          }
          klar dass er hier immer nur das erste td vom tr anspricht
          Lurchi ! Lurchi ! Lurchi !

          Kommentar


          • #6
            Wie soll es denn aussehen? Mal es doch einfach auf
            Vielleicht kann man dir dann gezielter helfen.

            Dass none nicht dasselbe ist wie hidden, ist aber angekommen, oder?
            [COLOR="DarkSlateGray"]Hast du die [COLOR="DarkSlateGray"]Grundlagen zur Fehlersuche[/color] gelesen? Hast du Code-Tags benutzt?
            Hast du als URL oder Domain-Beispiele example.com, example.net oder example.org benutzt?
            Super, danke!
            [/COLOR]

            Kommentar


            • #7
              Also mit diesen Klassen im IE8 Stylesheet hab ich zwischen jeder Zeile einen Border aber auch ganz am schluss der Tabelle. Was hab ich denn vergessen?

              Code:
              .tabelle-Rahmen-rechts-Zeilen {
              	border: none;
              	border-bottom: 0 hidden transparent;
              }
              .tabelle-Rahmen-rechts-Zeilen td {
              	border: none;
              	border-bottom: 1px solid #000000;
              }


              ok ich mals mal auf moment

              Also so soll die Tabelle aussehen(gestrichelte Linie = Border):

              test test test test test test
              ---------------------------------
              test test test test test test
              ---------------------------------
              test test test test test test
              ---------------------------------
              test test test test test test
              ---------------------------------
              test test test test test test
              ---------------------------------
              test test test test test test
              Zuletzt geändert von AmicaNoctis; 28.05.2010, 11:42.
              Lurchi ! Lurchi ! Lurchi !

              Kommentar


              • #8
                Zitat von Anbu Beitrag anzeigen
                Was hab ich denn vergessen?
                Das Online-Beispiel

                CSS ist ohne den zugehörigen HTML-Code schwer nachzuvollziehen. Wenn man dann noch nur einen Teil davon sieht und der auch noch aus Regeln ohne Elementselektoren besteht und nur irgendwelche Klassen anspricht, kann man das gar nicht mehr nachvollziehen.



                Zu deiner Skizze – ganz simpel:

                Code:
                table { border: 0 hidden transparent; border-collapse: collapse; }
                tr { border: 1px dashed #000; }
                Zuletzt geändert von AmicaNoctis; 28.05.2010, 11:51. Grund: collapse vergessen
                [COLOR="DarkSlateGray"]Hast du die [COLOR="DarkSlateGray"]Grundlagen zur Fehlersuche[/color] gelesen? Hast du Code-Tags benutzt?
                Hast du als URL oder Domain-Beispiele example.com, example.net oder example.org benutzt?
                Super, danke!
                [/COLOR]

                Kommentar


                • #9
                  hmm hat leider nicht geklappt. So jetzt mal komplett

                  Die Tabelle
                  HTML-Code:
                  <table border="0" cellpadding="0" cellspacing="0" class="tabelle-Rahmen-rechts-Zeilen" >
                  	<tr>
                  		<td>test</td>
                  		<td>test</td>
                  		<td>test</td>
                  		<td>test</td>
                  		<td>test</td>
                  		<td>test</td>
                  	</tr>
                  	<tr>
                  		<td>test</td>
                  		<td>test</td>
                  		<td>test</td>
                  		<td>test</td>
                  		<td>test</td>
                  		<td>test</td>
                  	</tr>
                  	<tr>
                  		<td>test</td>
                  		<td>test</td>
                  		<td>test</td>
                  		<td>test</td>
                  		<td>test</td>
                  		<td>test</td>
                  	</tr>
                  	<tr>
                  		<td>test</td>
                  		<td>test</td>
                  		<td>test</td>
                  		<td>test</td>
                  		<td>test</td>
                  		<td>test</td>
                  	</tr>
                  	<tr>
                  		<td>test</td>
                  		<td>test</td>
                  		<td>test</td>
                  		<td>test</td>
                  		<td>test</td>
                  		<td>test</td>
                  	</tr>
                  	<tr>
                  		<td>test</td>
                  		<td>test</td>
                  		<td>test</td>
                  		<td>test</td>
                  		<td>test</td>
                  		<td>test</td>
                  	</tr>
                  </table>
                  Main - CSS:
                  Code:
                  .tabelle-Rahmen-rechts-Zeilen {
                  	border-right: 1px solid #000000;
                  }
                  .tabelle-Rahmen-rechts-Zeilen td {
                  	border-top: 1px solid #000000;
                  }
                  .tabelle-Rahmen-rechts-Zeilen tr:first-child td {
                  	border: none;
                  }
                  IE8 Stylesheet:
                  Code:
                  .tabelle-Rahmen-rechts-Zeilen {
                  	border: none;
                  	border-right: 1px solid #000000;
                  	border-bottom: 0 hidden transparent;
                  	border-collapse: collapse;
                  }
                  .tabelle-Rahmen-rechts-Zeilen tr {
                  	border: expression(this.previousSibling==null?'none':'1px solid #000000');
                  }
                  So jetzt ist alles da. Zurzeit sieht es im IE8 so aus:

                  - Rahmen zwischen den Zeilen - schön und gut
                  - Tabellenrahmen rechts - schön und gut
                  - Tabellenrahmen oben - nicht gewollt
                  Lurchi ! Lurchi ! Lurchi !

                  Kommentar


                  • #10
                    Warum ignorierst du alles, was ich dir zu erklären versucht hab und wunderst dich dann noch, dass es immer noch nicht funktioniert?
                    [COLOR="DarkSlateGray"]Hast du die [COLOR="DarkSlateGray"]Grundlagen zur Fehlersuche[/color] gelesen? Hast du Code-Tags benutzt?
                    Hast du als URL oder Domain-Beispiele example.com, example.net oder example.org benutzt?
                    Super, danke!
                    [/COLOR]

                    Kommentar


                    • #11
                      ?? hab deine Änderungen doch im IE8 Style
                      Lurchi ! Lurchi ! Lurchi !

                      Kommentar


                      • #12
                        Aber warum so umständlich?
                        Hier Quelltext angucken!
                        [COLOR="DarkSlateGray"]Hast du die [COLOR="DarkSlateGray"]Grundlagen zur Fehlersuche[/color] gelesen? Hast du Code-Tags benutzt?
                        Hast du als URL oder Domain-Beispiele example.com, example.net oder example.org benutzt?
                        Super, danke!
                        [/COLOR]

                        Kommentar


                        • #13


                          habs.

                          Die Expression im IE war falsch:

                          Code:
                          .tabelle-Rahmen-rechts-Zeilen td {
                          	border: none;
                          }
                          .tabelle-Rahmen-rechts-Zeilen {
                          	border: none;
                          	border-right: 1px solid #000000;
                          	border-top: 0 hidden transparent;
                          	border-collapse: collapse;
                          }
                          .tabelle-Rahmen-rechts-Zeilen td {
                          	border-top: expression(parentNode.previousSibling==null?'none':'1px solid #000000');
                          }
                          hab jetzt einfach in der expression das parentnode also das tr angesprochen

                          Edit: Oh hab deinen Post erst grad gesehen
                          Lurchi ! Lurchi ! Lurchi !

                          Kommentar


                          • #14
                            Ganz toll, nur das diesen expression-Mist keiner braucht – siehe vorheriges Posting.

                            Edit: Achso.
                            [COLOR="DarkSlateGray"]Hast du die [COLOR="DarkSlateGray"]Grundlagen zur Fehlersuche[/color] gelesen? Hast du Code-Tags benutzt?
                            Hast du als URL oder Domain-Beispiele example.com, example.net oder example.org benutzt?
                            Super, danke!
                            [/COLOR]

                            Kommentar


                            • #15
                              Werd ich mir merken dass man den IE auch anders behandeln kann

                              danke nochmal!!
                              Lurchi ! Lurchi ! Lurchi !

                              Kommentar

                              Lädt...
                              X