web-dev-qa-db-fra.com

Espacement horizontal des cellules du tableau CSS: comment?

J'espère que c'est facile, mais je n'ai pas trouvé de solution. Je veux mettre de l'espace entre les colonnes d'une table.

Exemple

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

Un point important est que je ne veux pas d'espace sur les bords. Il existe une propriété d'espacement des bordures mais elle n'est pas prise en charge dans IE (6 ou 7) donc ce n'est pas bon. Elle place également de l'espace sur les bords.

Le mieux que j'ai trouvé est de mettre du padded-right: 10px sur mes cellules de tableau et d'ajouter une classe à la dernière pour supprimer le rembourrage. Ceci est loin d'être idéal car l'espace supplémentaire fait partie de la cellule et non à l'extérieur. Je suppose que vous pourriez faire la même chose avec une bordure transparente?

J'ai également essayé d'utiliser jQuery:

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

mais même sur des tables qui ne font que ~ 100 lignes, cela prenait 200 à 400 ms dans certains cas, ce qui est trop lent.

Toute aide appréciée.

Merci

Pour ceux qui suggèrent des colonnes, ils ne fonctionnent pas. Essaye ça:

<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>
javascriptjqueryhtmlcsslayout
38
Jordie

Que diriez-vous de donner à chaque tableau cellule une bordure transparente? Je suis sûr que cela le fera pour vous ...

table td {
  border:solid 5x transparent;
}

Et vous pouvez seulement l'appliquer horizontalement comme ça ...

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

Voici une démonstration complète de ce que je crois que 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 qu'IE6 supporte le CSS: premier enfant, alors voici une solution pour cela ...

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

C'est peut-être ce que vous cherchez:

Vous pouvez utiliser deux valeurs: la première est l'espacement horizontal des cellules, la seconde la verticale.

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

essayez d'utiliser cols

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>

cols prend également en charge les classes :)

j'espère que cela t'aides

Darko

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

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

  • frontière
  • contexte
  • largeur
  • visibilité

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

8
Darko Z

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

J'ai résolu le problème en décalant légèrement le tableau entier vers la gauche, en utilisant "position: relative; left: -10px". J'ai combiné cela avec l'espacement 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, j'espère que cela peut aussi vous aider.

2
Timo

Vous pouvez é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 des éléments.

.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>
2
Bayard Randel

Avez-vous essayé d'utiliser le regroupement col?

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

C'est du travail pour moi

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

1
Shaho Amini

Qu'en est-il simplement d'ajouter une cellule vide qui fonctionne comme un espaceur? Vous pouvez utiliser le col-tag comme indiqué ci-dessus pour donner aux 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 en faire plus, ajoutez-leur simplement des classes au lieu d'utiliser un style en ligne ...

0
peirix