Martin Hein: Tabelle ohne Aussenrand

Hallo Forum,

wie definiere ich die CSS-Eigenschaften einer Tabelle,
die nur innen Gitternetzlinen aufweisen soll ? Wenn,
eine table{width:300px;} definiert ist, die aussen
keinen Rand (also alle äusseren Zellen ohne Anstand
bis ans äussere Ende der Tabelle gehen) soll, die Zellen
untereinander aber einen Abstand ausweisen sollen.

td{padding:1px} bedeutet, dass die äusseren Zellen einen
abstand zum Tabellenrand haben. damit hat die Tabelle einen
Aussenrand. Mit td{border:1px} verhällt es sich genauso.

Die Eigenschaft {border-collapse: collapse;} habe ich schon
gefunden. die bringt mich aber nicht weiter.

???

tausen Dank für Tipps,
beste gruesse,
martin

  1. Hello out there!

    wie definiere ich die CSS-Eigenschaften einer Tabelle,
    die nur innen Gitternetzlinen aufweisen soll ?

    Mit den Pseudoklassen ':first-child' und ':last-child' sowie Selektoren für Nachfahren/Kinder überschreibst du 'border-top' und 'padding-top' für die Zellen der ersten Zeile, 'border-right' und 'padding-right' für die Zellen der letzten Spalte, ...

    Eine Lösung für veraltete Browser wäre die Vergabe von Klassen "first-child" und "last-child" für die jeweiligen 'tr'- und 'td'-Elemente.

    See ya up the road,
    Gunnar

    --
    „Wer Gründe anhört, kommt in Gefahr nachzugeben.“ (Goethe)
    1. Hallo Gunnar,

      warum denn immer noch so umständlich?
      border:hidden für das TABLE-Element selbst und gut is!

      Naja, nur für den IE muss man dann schon noch etwas mehr tun,
      das hatten wir ja schon vor Kurzem:

      http://forum.de.selfhtml.org/archiv/2007/1/t144326/#m937090

      Gruß Gernot

      1. Ich dachte es geht um Ränder, speziell um Padding, nicht um Rahmen.

        1. Hallo Yordan,

          Ich dachte es geht um Ränder, speziell um Padding, nicht um Rahmen.

          Es geht um eine Tabelle ohne Außenrand und wie Martin schon gesagt hat, ist es ihm egal, ob das mit Padding oder mit einem in der Farbe des die Tabelle umgebenden Hintergrundes realisierten Rahmens passiert:

          td{padding:1px} bedeutet, dass die äusseren Zellen einen
          abstand zum Tabellenrand haben. damit hat die Tabelle einen
          Aussenrand. Mit td{border:1px} verhällt es sich genauso.

          Gruß Gernot

          1. Hallo nochmal,

            ein das Padding der Tabellenzellen kompensierender negativer Margin für das Table-Element sollte allerdings die einfachste Lösung sein, die von allen Browsern ohne Probleme umgesetzt wird. Die Gesamtbreite der Tabelle müsste dann natürlich um das Doppelte des Zellen-Paddings heraufgesetzt werden.

            Gruß Gernot

            1. Hi Gernot,

              ist schon klar, dass ich die Tabelle breiter angeben kann,
              um damit den aussenrand irgendwie kompensieren. aber genau
              das ist der punkt !

              Ich habe ein Einen <p>-Absatz, der sich in 100%iger Breite
              im 'Content'- Bereich erstreckt. Tabelle darunter will ich
              mit 100%-Breite definieren, damit sie sich entsprechend
              ausdehnt. Das Layout der Tabelle sieht keinen Aussenrand,
              jedoch Zellenabstände vor. Wie beschreibe ich diese Tabelle
              mit CSS. Das war meine ursprüngliche Frage, für die Ihr gute
              Lösungen angeboten habt.

              Die eigentlich 'richtigere' Lösung ist tatsächlich die mit
              den Pseudoklassen. Richtig in dem Sinne, dass CSS das
              beschreibt, was dargestellt wird. Was ich brauch ist aber
              eine Lösung die browserübergreifend funktioniert, wie deine
              Lösung. Die sagt mir, ich muss tricksen. Und dann gibt es
              in meinem Fall mehrere Wege, wie z.B. deine Vorschlag, oder
              die Tabelle einefach statt mit 100% mit der Breite des
              Contentbereichs + 2 mal Cellpadding zu defininieren, oder
              Sie eine div zu legen, dass ich per clipping zurechtschneide
              Was davon ich am Ende mache, weiss ich noch nicht.

              besten Dank und

              viel Grüsse,
              martin

      2. Hallo Jungs,

        das ist ja tatsächlich wesentlich komplexer, als ich
        dachte ;(

        die lösung mit den 'childs' scheint für ie nicht zu
        funktionieren, wenn ich's richtig verstanden habe.
        die lösung mit dem div funktioniert auch nur dann,
        wenn man für den ie einen sonderfall baut. egal, wenn
        sie funktioniert ;)

        tausend dank
        für die tipps und

        besten gruss,
        martin