CSS horizontale Tabelle Zellabstand: wie?

Question

CSS horizontale Tabelle Zellabstand: wie?

Gefragt el 17 de Marsch, 2009: Wann wurde die Frage gestellt
38660 Ansichten: Anzahl der Besuche der Frage
4 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

4 Antworten

Answer 2

1voto

Joel Punkte 18917

Haben Sie es mit der Gruppierung von Spalten versucht?

<table>
    <colgroup>
        <col class="right-padding" />
        <col class="right-padding" />
        <col />
    </colgroup>
    <tbody>
        <tr>
            <td>
            </td>
            <td>
            </td>
            <td>
            </td>
        </tr>
    </tbody>
</table>

Beantwortet el 17 de Marsch, 2009 von Joel (18917 Punkte )

Answer 3

1voto

Shaho Amini Punkte 350

Das ist Arbeit für mich

border-collapse: separate; border-spacing: 0px 3px;

Beantwortet el 25 de Januar, 2015 von Shaho Amini (350 Punkte )

Answer 4

0voto

peirix Punkte 34275

Wie wäre es, einfach eine leere Zelle hinzuzufügen, die als Abstandhalter dient? Sie könnten das col-Tag wie oben beschrieben verwenden, um den leeren Zellen eine bestimmte Breite zu geben

<col/>
<col style="width:20px"/>
<col/>
<col style="width:20px"/>
<col/>
<tr>
  <td>Data</td>
  <td>& nbsp;</td>
  <td>Data</td>
  <td>& nbsp;</td>
  <td>Data</td>
</tr>

Oder wenn Sie mehr mit ihnen machen wollen, fügen Sie ihnen einfach Klassen hinzu, anstatt Inline-Styling zu verwenden...

Beantwortet el 18 de Marsch, 2009 von peirix (34275 Punkte )

1 Stimmen

Mehr Markup für Stylingzwecke verwenden? Wow! Das ist eine furchtbare Idee.

Kommentiert el 18 de Marsch, 2009 von Josh Stodola

0 Stimmen

Nach dem Lesen durch alle oben genannten Antworten, peirix Vorschlag ist der einzige, der funktioniert, und funktioniert in allen Browsern. Yea mit Markup für Styling ist in der Regel eine schlechte Idee, aber in meinem speziellen Fall ist dies das einzige, was funktioniert. Die border-spacing Idee ist in der Nähe, aber es endet bis setzen den Raum zwischen dem Label:Wert (ersten beiden TD-Zellen), die schlecht aussieht.

Kommentiert el 18 de Dezember, 2012 von Ryan Stille

Answer 5

-1voto

martin Punkte 2390

Die Antwort von Josh ist recht gut, aber meiner Meinung nach unnötig kompliziert. Wenn Sie die Tabellenränder auf "ausgeblendet" und den Ausklappmodus auf "ausklappen" setzen, werden die Ränder an den Außenkanten der Spalten wie gewünscht entfernt.

Arbeitsbeispiel:

Stylesheet:

table#my_table  {
    border-collapse: collapse;
    border-style: hidden;
}

table#my_table td {
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
}

HTML:

<table id="my_table">
   <tr>
     <td>A1</td>
     <td>A2</td>
     <td>A3</td>
   </tr>
   <tr>
     <td>B1</td>
     <td>B2</td>
     <td>B3</td>
   </tr>         
</table>

Beantwortet el 14 de Juli, 2011 von martin (2390 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: