CSS horizontale Tabelle Zellenabstand: wie?

Hoffentlich ist dies ein einfacher, aber ich habe keine Lösung gefunden. Ich möchte Platz zwischen Spalten auf einem Tisch geben.CSS horizontale Tabelle Zellenabstand: wie?

Beispiel

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

Ein wichtiger Punkt ist, dass ich an den Rand nicht Raum will. Es gibt eine border-spacing-Eigenschaft, die aber in IE (6 oder 7) nicht unterstützt wird, was nicht gut ist. Es bringt auch Platz an den Rändern.

Das Beste, was ich habe, ist gepolstert-rechts: 10px auf meine Tabellenzellen und fügen Sie eine Klasse zu der letzten, um die Polsterung zu entfernen. Dies ist weniger als ideal, da der zusätzliche Raum ein Teil der Zelle ist, der nicht außerhalb ist. Ich nehme an, du könntest das gleiche mit einer transparenten Grenze machen?

Ich habe auch versucht mit jQuery:

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

aber auch auf Tabellen, die nur ~ 100 Zeilen in der Größe sind dies wurde 200-400ms in einigen Fällen nehmen, die zu langsam ist.

Jede Hilfe wird geschätzt.

Dank

Jene was darauf hindeutet, Spalten sie nicht funktionieren. Versuchen Sie Folgendes:

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

Quelle

2009-03-17 Jordie

Ihre "Spalten" Beispiel funktioniert perfekt für mich! –

Welcher Browser?Bei Firefox zeigt mir Firebug die Spalten größer als die Tabelle, aber die Tabellenzellen sind nicht wirklich skaliert (dh die Spalten nach Firebug reichen über die Tabelle hinaus). – Jordie

Chrome funktioniert nicht. IE tut es aber. Weird – Jordie

Haben Sie versucht, Col-Gruppierung zu verwenden?

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

Quelle

2009-03-17 22:06:51 Joel

Funktioniert nicht. Siehe oben. – Jordie

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 auch Klassen unterstützen :)

hoffe, das hilft

Darko

EDIT: Um eine col zu klären, ist ein Element an der Spitze der Tabelle deklariert, um ganze Spalten zu beeinflussen. Das erste col-Element beeinflusst die erste Spalte, die zweite col = zweite Spalte und so weiter. Sie können in Colgroups gruppiert werden, wenn Sie mehr als einer Spalte denselben Stil zuweisen möchten.

EDIT2: Nach einigen mehr Forschung es stellt sich heraus, dass die einzige zuverlässige Stile, die Sie auf einem col Element festlegen können, sind:

Grenze
Hintergrund
Breite
Sichtbarkeit

Kein Rand oder Padding. Bugger! Würde das Einstellen der Breite der Spalten Ihr Problem explizit lösen?

Quelle

2009-03-17 22:07:16

Funktioniert nicht. Siehe oben. – Jordie

Das Hinzufügen von Markup für Stylingzwecke ist ein semantisches No-No. –

Sie könnten auch in Betracht ziehen, eine Reihe von DIVs mit fester Breite zu verwenden, die links mit Rändern schweben.Dies gibt Ihnen möglicherweise mehr Kontrolle über das Element-Styling.

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

Quelle

2009-03-17 22:10:43

Errr .. wir befürworten die Verwendung von Divs sogar für Tabellendaten jetzt? – cletus

Nein, aber das OP scheint Schwierigkeiten zu haben, das gewünschte Styling mit dem Tischelement zu erreichen. Am besten eignen sich Tabellen für Tabellendaten. –

Wie wäre es, nur eine leere Zelle hinzuzufügen, die als Spacer funktioniert? Sie können den col-Tag wie angegeben verwenden über den leeren Zellen eine gewisse Breite

<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 mit ihnen tun mehr geben wollen, nur Klassen hinzufügen, um sie statt Inline-Styling von usin ...

Quelle

2009-03-18 07:01:58 peirix

Verwenden Sie mehr Markup für Styling-Zwecke? Beeindruckend. Das ist eine schreckliche Idee. –

Nach dem Lesen aller obigen Antworten ist der Vorschlag von peirix der einzige, der funktioniert und in allen Browsern funktioniert. Ja, Markup für das Styling zu verwenden, ist generell eine schlechte Idee, aber in meinem speziellen Fall ist das die einzige Sache, die funktioniert. Die Idee des Randabstands ist nahe, aber es endet damit, dass der Abstand zwischen dem Label: Wert (die ersten zwei TD-Zellen), der schlecht aussieht, gesetzt wird. –

Wie wäre es mit jeder Tabelle Zelle eine transparente Grenze? Ich bin mir ziemlich sicher, dass dies tun wird es für Sie ...

table td { 
    border:solid 5x transparent; 
}

Und Sie können es nur horizontal wie so gelten ...

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

Hier ist eine komplette Arbeits Demo von dem, was ich glaube, Sie versuchen, die CSS zu erreichen ...

<!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 IE6 unterstützt: first-child, ist so hier eine Abhilfe für das ...

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

Quelle

2009-03-18 20:58:15

: First-Kind ist nicht gerade weit verbreitet CSS – Jordie

Ich weiß, dass. Es geht darum, die beste Lösung für die Anforderungen auszuwählen. –

Ich habe eine IE6 Workaround für Sie hinzugefügt, Jordie. –

-1

Die Antwort von Josh ist ziemlich gut, aber meiner Meinung nach unnötig kompliziert. Wenn Sie die Tabellenränder auf "Versteckt" und den Zusammenklappmodus auf "Zusammenfalten" setzen, werden die Ränder an den äußeren Kanten der Spalten wie erforderlich entfernt.

Arbeitsbeispiel:

Sheet:

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>

Quelle

2011-07-14 13:58:41 martin

Joshs Antwort funktioniert nicht, wenn Sie bereits Grenzen haben um Ihre Zellen, wie ich.

Ich löste das Problem, indem ich die gesamte Tabelle mit "position: relative; left: -10px" etwas nach links verschoben habe. Ich kombinierte das mit dem Zellenabstand auf dem Tisch.

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

und die 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 was für mich, ich hoffe, es Ihnen zu helfen.

Quelle

2012-01-06 15:20:36 Timo

Es ist, was Sie für Loking werden können:

können Sie zwei Werte verwendet werden: die erste ist die horizontale Cellspacing ist, der zweite die vertikale.

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

Quelle

2012-03-05 15:21:49 Lukas

Das ist wirklich ein guter, danke! – lucaferrario

Großartig! Zwei Einschränkungen: Rand auf ersten und letzten Abstand und Quirksmode impliziert möglicherweise nicht für IE7 und unter http://www.quirksmode.org/css/tables.html – KCD

Wenn nach diesem Stil - ersten und/oder letzten Spaltenabstand ein Problem ist - Sie können den Tisch in einen Behälter "div" mit negativen linken und/oder rechten "Rändern" legen. –

Es ist Arbeit für mich

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

Quelle

2015-01-25 09:47:41

CSS horizontale Tabelle Zellenabstand: wie?

Antwort

Verwandte Themen