Espacement horizontal des cellules CSS: comment?

Espérons que ce soit facile, mais je n'ai pas trouvé de solution. Je veux mettre de l'espace entre les colonnes sur une table.Espacement horizontal des cellules CSS: comment?

Exemple

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

Un point important est que je ne veux pas d'espace sur les bords. Il y a une propriété border-spacing mais elle n'est pas supportée dans IE (6 ou 7) donc ce n'est pas bon. Il met également de l'espace sur les bords. Le meilleur que j'ai trouvé est de mettre padded-right: 10px sur mes cellules de table et d'ajouter une classe à la dernière pour enlever le rembourrage. C'est loin d'être idéal car l'espace supplémentaire fait partie de la cellule et non de l'extérieur. Je suppose que vous pourriez faire la même chose avec une bordure transparente?

J'ai aussi essayé d'utiliser jQuery:

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

mais même sur les tables qui ne sont que ~ 100 lignes en taille ceci se 200-400ms dans certains cas, ce qui est trop lent.

Toute aide appréciée.

Merci

Pour ces colonnes suggérant qu'ils ne fonctionnent pas. Essayez ceci:

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

Source

2009-03-17 Jordie

Votre exemple "colonnes" fonctionne parfaitement pour moi! –

Quel navigateur?Sur Firefox pour moi Firebug montre les colonnes plus grandes que la table mais les cellules de la table ne sont pas réellement redimensionnées (ie les colonnes selon Firebug s'étendent au-delà de la table). – Jordie

Chrome ne fonctionne pas. IE fait cependant. Bizarre – Jordie

Avez-vous essayé d'utiliser le groupement de colonnes?

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

Source

2009-03-17 22:06:51 Joel

Ne fonctionne pas. Voir au dessus. – Jordie

essayer d'utiliser col de

l'exemple

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

soutiennent également des cours Col. :)

espérons que cette aide

Darko

EDIT: Pour clarifier un col est un élément déclaré en haut de la table pour influencer des colonnes entières. Le premier élément col influencera la première colonne, la seconde colonne col = deuxième et ainsi de suite. Ils peuvent être regroupés dans colgroups si vous souhaitez attribuer le même style à plusieurs colonnes.

EDIT2: Après quelques recherches, il se avère que les seuls styles fiables que vous pouvez définir sur un élément col sont:

frontière
fond
largeur
visibilité

Pas de marge ou de rembourrage. Salaud! La définition de la largeur des colonnes résoudrait-elle explicitement votre problème?

Source

2009-03-17 22:07:16

Ne fonctionne pas. Voir au dessus. – Jordie

Ajouter un balisage à des fins de style est un non-non sémantique. –

Vous pourriez également envisager d'utiliser une série de divs de largeur fixe flottant à gauche avec des marges.Cela pourrait vous donner un peu plus de contrôle sur le style de l'élément.

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

Source

2009-03-17 22:10:43

Errr .. nous préconisons l'utilisation de divs même pour les données tabulaires maintenant? – cletus

Non, mais l'OP semble avoir du mal à réaliser le style qu'il souhaite avec l'élément de table. Les tableaux sont certainement les meilleurs pour les données tabulaires. –

Que diriez-vous juste d'ajouter une cellule vide qui fonctionne comme une entretoise? Vous pouvez utiliser la balise col-comme indiqué ci-dessus pour donner les cellules vides une certaine largeur

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

Ou si vous voulez faire plus avec eux, il suffit d'ajouter des classes à eux au lieu de usin style en ligne ...

Source

2009-03-18 07:01:58 peirix

Utilisez-vous plus de balisage à des fins de style? Sensationnel. C'est une idée horrible. –

Après avoir lu toutes les réponses ci-dessus, la suggestion de peirix est la seule qui fonctionne, et fonctionne dans tous les navigateurs. Yea utilisant le balisage pour le style est généralement une mauvaise idée, mais dans mon cas particulier c'est la seule chose qui fonctionne. L'idée de l'espacement des frontières est proche, mais elle finit par mettre l'espace entre l'étiquette: valeur (les deux premières cellules TD), ce qui semble mauvais. –

Comment donner à chaque table une cellule une bordure transparente? Je suis assez sûr que cela va le faire pour vous ...

table td { 
    border:solid 5x transparent; 
}

Et vous ne pouvez appliquer horizontalement comme si ...

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

Voici une démonstration de travail complète de ce que je crois vous essayez d'accomplir ...

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

Je ne crois pas IE6 supporte le CSS: premier enfant, alors voici une solution pour que ...

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

Source

2009-03-18 20:58:15

: le premier-enfant n'est pas vraiment largement supporté CSS – Jordie

Je le réalise. Il s'agit de choisir la meilleure solution pour les exigences. –

J'ai ajouté une solution de contournement IE6 pour vous, Jordie. –

-1

La réponse de Josh est assez bonne, mais à mon avis inutilement compliquée. Lorsque vous définissez les bordures de la table sur "masqué" et le mode de réduction sur "réduire", les bordures sur les bords extérieurs des colonnes seront éliminées, comme requis.

Exemple de travail:

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>

Source

2011-07-14 13:58:41 martin

réponse de Josh ne fonctionne pas si vous avez déjà les frontières autour de vos cellules, comme moi.

J'ai résolu le problème en déplaçant légèrement toute la table vers la gauche, en utilisant "position: relative, gauche: -10px". J'ai combiné ceci avec des cellules sur la table.

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

et le 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; 
}

C'est ce qui fonctionne pour moi, je l'espère, il peut vous aider aussi.

Source

2012-01-06 15:20:36 Timo

Il est peut-être ce que tu .Com pour:

Vous pouvez utiliser deux valeurs: le premier est le cellspacing horizontal, le second le vertical.

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

Source

2012-03-05 15:21:49 Lukas

C'est vraiment un bon, merci! – lucaferrario

Super! Deux limitations: la marge sur le premier et le dernier espacement et Quirksmode implique peut ne pas fonctionner pour IE7 et ci-dessous http://www.quirksmode.org/css/tables.html – KCD

Si après ce style - la première et/ou la dernière colonne d'espacement est un problème - vous pouvez placer la table dans un conteneur 'div' avec des' marges 'gauche et/ou' droite négatives. –

Il est un travail pour moi

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

Source

2015-01-25 09:47:41

Espacement horizontal des cellules CSS: comment?

Répondre

Questions connexes