Espacement des cellules des tableaux horizontaux en CSS : comment ?

Question

Espacement des cellules des tableaux horizontaux en CSS : comment ?

Demandé el 17 de Mars, 2009: Quand la question a-t-elle été
30364 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Ouvert: Situation réelle de la question

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

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é border-spacing, mais elle n'est pas prise en charge par IE (6 ou 7). Elle met également de l'espace sur les bords.

La meilleure solution que j'ai trouvée est de mettre padded-right : 10px sur les cellules de mon tableau et d'ajouter une classe à la dernière pour supprimer le padding. 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 également essayé d'utiliser jQuery :

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

mais même sur des tables de seulement ~100 lignes, cela prenait 200-400 ms dans certains cas, ce qui est trop lent.

Toute aide est appréciée.

Merci

Pour ceux qui suggèrent des colonnes, elles 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>

Demandé el 17 de Mars, 2009 par Jordie

Answer 1

5 Réponses

Answer 2

20voto

Josh Stodola Points 42410

Et si on donnait à chaque table cellule une bordure transparente ? Je suis presque sûr que cela va le faire 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 vous essayez d'accomplir, je crois...

<!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 pense pas qu'IE6 supporte le CSS :first-child, donc voici une solution de contournement pour cela...

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

Répondu el 18 de Mars, 2009 par Josh Stodola (42410 Points )

Answer 3

11voto

Lukas Points 101

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

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

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

Répondu el 5 de Mars, 2012 par Lukas (101 Points )

Answer 4

8voto

Darko Z Points 16570

Essayez d'utiliser col s

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>

les cols soutiennent également les classes :)

J'espère que cela vous aidera

Darko

EDITAR: Pour clarifier un col est un élément déclaré en haut du tableau pour influencer des colonnes entières. L'élément first col influencera la première colonne, le second col = la 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 l'on peut définir sur une col élément sont :

frontière
arrière-plan
largeur
visibilité

Pas de marge ni de rembourrage. Mince ! Le fait de définir explicitement la largeur des colonnes résoudrait-il votre problème ?

Répondu el 17 de Mars, 2009 par Darko Z (16570 Points )

Answer 5

2voto

Bayard Randel Points 5771

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

Répondu el 17 de Mars, 2009 par Bayard Randel (5771 Points )

Answer 6

2voto

Timo Points 11

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

J'ai résolu le problème en déplaçant l'ensemble du tableau légèrement vers la gauche, en utilisant "position : relative ; left : -10px". J'ai combiné cela avec un espacement entre les cellules du tableau.

<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 pourra vous aider aussi.

Répondu el 6 de Janvier, 2012 par Timo (11 Points )

Espacement des cellules des tableaux horizontaux en CSS : comment ?

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

Espacement des cellules des tableaux horizontaux en CSS : comment ?

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: