CSS horizontale Tabelle Zellabstand: wie?

Question

CSS horizontale Tabelle Zellabstand: wie?

Gefragt el 17 de Marsch, 2009: Wann wurde die Frage gestellt
38659 Ansichten: Anzahl der Besuche der Frage
5 Antworten: Anzahl der Fragenantworten
Gelöst: Aktueller Status der Frage

Hoffentlich ist das eine einfache Sache, aber ich habe keine Lösung gefunden. Ich möchte in einer Tabelle Leerzeichen zwischen die Spalten setzen.

Beispiel

| Cell |<- space ->| Cell |<- space ->| Cell |

Ein wichtiger Punkt ist, dass ich keinen Abstand an den Rändern haben möchte. Es gibt eine Eigenschaft border-spacing, aber sie wird im IE (6 oder 7) nicht unterstützt, so dass das nicht gut ist. Es setzt auch Raum an den Rändern.

Das Beste, was mir eingefallen ist, ist, padded-right: 10px auf meine Tabellenzellen zu setzen und eine Klasse zur letzten Zelle hinzuzufügen, um das Padding zu entfernen. Dies ist weniger als ideal, weil der zusätzliche Raum ist Teil der Zelle nicht außerhalb davon. Ich schätze, Sie könnten das gleiche mit einem transparenten Rahmen tun?

Ich habe auch versucht, jQuery zu verwenden:

$(function() {
  $("table > tbody > tr:not(:last-child").addClass("right-padding");
});

aber selbst bei Tabellen, die nur ~100 Zeilen groß sind, dauerte dies in einigen Fällen 200-400 ms, was zu langsam ist.

Jede Hilfe ist willkommen.

Gracias

Für diejenigen, die Spalten vorschlagen, funktionieren sie nicht. Versuchen Sie dies:

<html>
<head>
  <title>Layout</title>
  <style type="text/css">
    table { border: 1px solid black; }
    td { background: yellow; }
  </style>
</head>
<body>
<table>
<col style="padding-right: 30px;">
<col style="padding-right: 30px;">
<col>
<tr>
  <td>1</td>
  <td>2</td>
  <td>3</td>
</tr>
<tr>
  <td>4</td>
  <td>5</td>
  <td>6</td>
</tr>
<tr>
  <td>7</td>
  <td>8</td>
  <td>9</td>
</tr>
</table>
</body>
</html>

Gefragt el 17 de Marsch, 2009 von Jordie

0 Stimmen

Ihr "Spalten"-Beispiel funktioniert für mich perfekt!

Kommentiert el 18 de Marsch, 2009 von Josh Stodola

0 Stimmen

Welcher Browser? Auf Firefox für mich Firebug zeigt die Spalten größer als die Tabelle, aber die Tabelle Zellen sind nicht tatsächlich Größe geändert (dh die Spalten nach Firebug über die Tabelle erstrecken).

Kommentiert el 18 de Marsch, 2009 von Jordie

0 Stimmen

Chrome funktioniert nicht. IE hingegen schon. Seltsam

Kommentiert el 18 de Marsch, 2009 von Jordie

Anzeigen 1 weitere Kommentare

Answer 1

5 Antworten

Answer 2

22voto

Josh Stodola Punkte 79569

Wie wäre es, wenn Sie jedem Tisch Zelle einen transparenten Rand? Ich bin mir ziemlich sicher, dass dies für Sie tun wird...

table td {
  border:solid 5x transparent;
}

Und Sie können es nur anwenden Horizontal etwa so...

table td {
  border-left:solid 10px transparent;
}
table td:first-child {
  border-left:0;
}

Hier ist eine vollständige Arbeitsdemo von dem, was Sie, wie ich glaube, zu erreichen versuchen...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
  <head>
    <title>Layout</title>
    <style type="text/css">
      table {
        border: 1px solid black;
      }

      table td {
        background: yellow;
        border-left:solid 10px transparent;
      }

     table td:first-child {
       border-left:0;
     }
    </style>
  </head>
  <body>
    <table>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
      </tr>
      <tr>
        <td>4</td>
        <td>5</td>
        <td>6</td>
      </tr>
      <tr>
        <td>7</td>
        <td>8</td>
        <td>9</td>
      </tr>
    </table>
  </body>
</html>

Ich glaube nicht, dass der IE6 das CSS :first-child unterstützt, daher hier ein Workaround dafür...

<!–-[if IE 6]>
<style type="text/css">
  table td {
    border-left: expression(this.previousSibling == null ? '0' : 'solid 5px transparent');
  }
</style>
<![endif]-->

Beantwortet el 18 de Marsch, 2009 von Josh Stodola (79569 Punkte )

0 Stimmen

:first-child ist nicht gerade weit verbreitet in CSS

Kommentiert el 19 de Marsch, 2009 von Jordie

0 Stimmen

Das ist mir klar. Es geht darum, die beste Lösung für die jeweiligen Anforderungen zu finden.

Kommentiert el 19 de Marsch, 2009 von Josh Stodola

0 Stimmen

Iirc, IE6 unterstützt keine transparenten Ränder... so, es wird als schwarz gerendert.

Kommentiert el 6 de Januar, 2012 von canon

Answer 3

12voto

Lukas Punkte 121

Es ist vielleicht das, wonach Sie suchen:

Sie können zwei Werte verwenden: Der erste ist der horizontale, der zweite der vertikale Zellabstand.

<table style="border-spacing: 40px 10px;">

Beantwortet el 5 de Marsch, 2012 von Lukas (121 Punkte )

1 Stimmen

Großartig! Zwei Einschränkungen: Marge auf den ersten und letzten Abstand und Quirksmode impliziert möglicherweise nicht für IE7 und darunter funktionieren quirksmode.org/css/tables.html

Kommentiert el 30 de November, 2012 von KCD

0 Stimmen

Wenn nach diesem Stil der Abstand der ersten und/oder letzten Spalte ein Problem ist, können Sie die Tabelle in einen Container setzen div mit negativer linker und/oder rechter Seite margins .

Kommentiert el 20 de Dezember, 2012 von Ujjwal Singh

0 Stimmen

Dies scheint bei Chrome ein wenig problematisch zu sein. In Firefox sieht es großartig aus.

Kommentiert el 17 de Juli, 2018 von SMBiggs

Answer 4

9voto

Darko Z Punkte 37188

Versuchen Sie es mit col s

Beispiel

<table>
    <col style="padding-right:20px;" />
    <col style="padding-right:30px;" />
    <col />
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

cols unterstützen auch Klassen :)

Ich hoffe, das hilft

Darko

EDIT: Zur Klärung einer col ist ein Element, das am Anfang der Tabelle deklariert wird, um ganze Spalten zu beeinflussen. Das erste col-Element beeinflusst die erste Spalte, das zweite col-Element die zweite Spalte und so weiter. Sie können in Spaltengruppen gruppiert werden, wenn Sie mehreren Spalten denselben Stil zuweisen möchten.

EDIT2: Nach weiteren Recherchen hat sich herausgestellt, dass die einzigen zuverlässigen Stile, die man auf einer col Element sind:

Grenze
Hintergrund
Breite
Sichtbarkeit

Kein Rand oder Polsterung. Mist! Könnte das explizite Festlegen der Spaltenbreite Ihr Problem lösen?

Beantwortet el 17 de Marsch, 2009 von Darko Z (37188 Punkte )

Answer 5

2voto

Bayard Randel Punkte 9592

Sie könnten auch eine Reihe von Divs mit fester Breite verwenden, die mit Rändern nach links verschoben werden. Dies könnte Ihnen etwas mehr Kontrolle über das Styling der Elemente geben.

.row div {
     margin-right: 10px;
     float: left;
     width: 50px;
}

    <div class="row">
        <div>Cell One</div>
        <div>Cell Two</div>
        <div>Cell Three</div>
    </div>

Beantwortet el 17 de Marsch, 2009 von Bayard Randel (9592 Punkte )

0 Stimmen

Errr.. wir befürworten die Verwendung von divs auch für tabellarische Daten jetzt?

Kommentiert el 18 de Marsch, 2009 von cletus

0 Stimmen

Nein, aber der Auftraggeber scheint Schwierigkeiten zu haben, das gewünschte Styling mit dem Tabellenelement zu erreichen. Tabellen sind sicherlich am besten für tabellarische Daten geeignet.

Kommentiert el 18 de Marsch, 2009 von Bayard Randel

Answer 6

2voto

Timo Punkte 21

Joshs Antwort funktioniert nicht, wenn Sie, wie ich, bereits Ränder um Ihre Zellen haben.

Ich habe das Problem gelöst, indem ich die gesamte Tabelle leicht nach links verschoben habe, indem ich "position: relative; left: -10px" verwendet habe. Ich kombinierte dies mit Cellspacing in der Tabelle.

<div id='sandbox'>
    <table cellspacing='10'>
          <tr>
                <td class='smoothBox'>
                    ...
                </td>
                <td class='smoothBox'>
                    ...
                </td>
          </tr>
    </table>
</div>

und das css:

#sandbox {
    float: left;
    position: relative; /* move the whole sandbox */
    left: -11px;        /* slightly to the left */
    width: 950px;
    margin-top: 0px;
    padding: 1px;
    text-align: left;
}
#sandbox table {
    float: left;
    width: 100%;
}
#sandbox td {
    width: 300px;
    vertical-align: top;
}

Das ist es, was bei mir funktioniert, ich hoffe, es hilft auch Ihnen.

Beantwortet el 6 de Januar, 2012 von Timo (21 Punkte )

CSS horizontale Tabelle Zellabstand: wie?

Antworten

Empfohlene Fragen

Top-Tags

CodeJaeger.com

Powered by:

CSS horizontale Tabelle Zellabstand: wie?

Antworten

Verwandte Fragen

Empfohlene Fragen

Top-Tags

CodeJaeger.com

Powered by: