web-dev-qa-db-fra.com

Comment augmenter la distance entre les colonnes de table en HTML?

Supposons que je souhaite créer un tableau à une rangée avec 50 pixels entre chaque colonne, mais 10 pixels de remplissage en haut et en bas.

Comment ferais-je cela en HTML/CSS?

htmlcsshtml-tablepadding
44
idude

Il n'y a pas besoin de faux <td>s. Se servir de border-spacing au lieu. Appliquez-le comme ceci:

HTML: 

<table>
  <tr>
    <td>First Column</td>
    <td>Second Column</td>
    <td>Third Column</td>
  </tr>
</table>

CSS: 

table {
  border-collapse: separate;
  border-spacing: 50px 0;
}

td {
  padding: 10px 0;
}

Voyez-le en action.

79
daniels

Définit la largeur du <td>s à 50px puis ajoutez votre <td> + un autre faux <td>

Violon.

HTML: 

<table>
    <tr>
        <td>First Column</td>
        <td></td>
        <td>Second Column</td>
        <td></td>
        <td>Third Column</td>
    </tr>
</table>

[~ # ~] css [~ # ~] 

table tr td:empty {
    width: 50px;
}

table tr td {
    padding-top: 10px;
    padding-bottom: 10px;
}

Code expliqué:

La première règle CSS vérifie la présence de td vides et leur donne une largeur de 50 pixels, puis la seconde règle donne le remplissage du haut et du bas à tous les td.

12
Mohammad Areeb Siddiqui

Si je comprends bien, vous voulez ceci violon .

HTML: 

<table>
<tr>
    <td>Hello HTML!</td>
    <td>Hello CSS!</td>
    <td>Hello JS!</td>
</tr>

CSS: 

table {
    background: gray;
}
td {    
    display: block;
    float: left;
    padding: 10px 0;
    margin-right:50px;
    background: white;
}
td:last-child {
    margin-right: 0;
}
9
Igor

Vous pouvez simplement utiliser un rembourrage. Ainsi:

http://jsfiddle.net/davidja/KG8Kv/

[~ # ~] html [~ # ~] 

   <table>
        <tr>
            <td>item1</td>
            <td>item2</td>
            <td>item2</td>
        </tr>
    </table>

[~ # ~] css [~ # ~] 

 td {padding:10px 25px 10px 25px;}

OR

 tr td:first-child {padding-left:0px;}
 td {padding:10px 0px 10px 50px;}
7
David Allen

Une meilleure solution que la réponse choisie serait d'utiliser la taille de la bordure plutôt que son espacement. Le principal problème de l'espacement des bordures est que même la première colonne aurait un espacement à l'avant.

Par exemple,

table {
  border-collapse: separate;
  border-spacing: 80px 0;
}

td {
  padding: 10px 0;
}
<table>
  <tr>
    <td>First Column</td>
    <td>Second Column</td>
    <td>Third Column</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
</table>

Pour éviter cette utilisation: border-left: 100px solid #FFF; Et mettre border:0px pour la première colonne.

Par exemple,

td,th{
  border-left: 100px solid #FFF;
}

 tr>td:first-child {
   border:0px;
 }
<table id="t">
  <tr>
    <td>Column1</td>
    <td>Column2</td>
    <td>Column3</td>
  </tr>
  <tr>
    <td>1000</td>
    <td>2000</td>
    <td>3000</td>
  </tr>
</table>
5
Ani Menon

Essayer

padding : 10px 10px 10px 10px;
4
Chetan Gawai