web-dev-qa-db-fra.com

Rembourrage d'une rangée de table

<html>
    <head>
        <title>Table Row Padding Issue</title>
        <style type="text/css">
            tr {
                padding: 20px;
            }
        </style>
    </head>
    <body>
        <table>
            <tbody>
                <tr>
                    <td>
                        <h2>Lorem Ipsum</h2>
                        <p>Fusce sodales lorem nec magna iaculis a fermentum lacus facilisis. Curabitur sodales risus sit amet
                        neque fringilla feugiat. Ut tellus nulla, bibendum at faucibus ut, convallis eget neque. In hac habitasse 
                        platea dictumst. Nullam elit enim, gravida eu blandit ut, pellentesque nec turpis. Proin faucibus, sem sed 
                        tempor auctor, ipsum velit pellentesque lorem, ut semper lorem eros ac eros. Vivamus mi urna, tempus vitae 
                        mattis eget, pretium sit amet sapien. Curabitur viverra lacus non tortor luctus vitae euismod purus 
                        hendrerit. Praesent ut venenatis eros. Nulla a ligula erat. Mauris lobortis tempus nulla non 
                        scelerisque.</p>
                    </td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

Voici à quoi ressemble le rembourrage. Voyez comment le td à l'intérieur n'est pas affecté. Quelle est la solution? Table Row Padding Issue

htmlcsshtml-tablerowpadding
57
Spencer

L'astuce consiste à donner du padding sur les éléments td, mais à faire une exception pour le premier (oui, c'est hacky, mais vous devez parfois respecter les règles du navigateur):

td {
  padding-top:20px;
  padding-bottom:20px;
  padding-right:20px;   
}

td:first-child {
  padding-left:20px;
  padding-right:0;
}

Le premier enfant est relativement bien pris en charge: https://developer.mozilla.org/en-US/docs/CSS/:first-child

Vous pouvez utiliser le même raisonnement pour le remplissage horizontal en utilisant tr:first-child td.

Vous pouvez également exclure la première colonne à l’aide de l’opérateur not . Le support pour ceci n’est pas aussi bon en ce moment, cependant. 

td:not(:first-child) {
  padding-top:20px;
  padding-bottom:20px;
  padding-right:20px;       
}
84
Joeri Hendrickx

Dans les spécifications CSS 1 et CSS 2 , le remplissage était disponible pour tous les éléments, y compris <tr>. Cependant, la prise en charge du remplissage pour table-row (<tr>) a été supprimée dans les spécifications CSS 2.1 et CSS 3 . Je n'ai jamais trouvé la raison de cette modification agaçante qui affecte également la propriété margin et quelques autres éléments de la table (en-tête, pied de page et colonnes).

Mise à jour: en février 2015, ce fil de discussion de la liste de diffusion [email protected] traitait de l'ajout de la prise en charge du remplissage et de la bordure pour la ligne de table. Cela s'appliquerait également au modèle de boîte standard aux éléments table-row et table-column. Cela permettrait de tels exemples . Le fil de discussion semble suggérer que la prise en charge du remplissage des lignes de table n'a jamais existé dans les normes CSS, car elle aurait des moteurs de disposition compliqués. Dans le modèle de boîte de base CSS du 30 septembre 2014 Editor's Draft , des propriétés de remplissage et de bordure existent pour tous les éléments, y compris les éléments table-row et table-column. Si cela devenait finalement une recommandation du W3C, votre exemple html + css pourrait enfin fonctionner comme prévu dans les navigateurs.

14
Futal

donner au td padding

6
Moin Zaman

vous pouvez simplement ajouter ce style à la table.

table {
border-spacing: 15px;

}

1
Ifesinachi Bryan

Option 1

Vous pouvez également le résoudre en ajoutant une bordure transparente à la ligne (tr), comme ceci

HTML

<table>
    <tr> 
         <td>1</td>
    </tr>
    <tr> 
         <td>2</td>
    </tr>
</table>

CSS

tr {
    border-top: 12px solid transparent;
    border-bottom: 12px solid transparent;
}

Fonctionne comme un charme, bien que si vous avez besoin de frontières régulières, cette méthode ne fonctionnera malheureusement pas.

Option 2

Comme les lignes agissent comme un moyen de regrouper les cellules, la bonne façon de le faire serait d’utiliser

table {
    border-collapse: inherit;
    border-spacing: 0 10px;
}
1
Karl Johan Vallner

C'est un très vieux billet, mais je pensais que je devrais poster ma solution d'un problème similaire que j'ai rencontré récemment. 

Réponse : J'ai résolu ce problème en affichant l'élément tr en tant qu'élément block, c'est-à-dire en spécifiant un CSS de display: block pour l'élément tr. Vous pouvez le voir dans l'exemple de code ci-dessous.

<style>
  tr {
    display: block;
    padding-bottom: 20px;
  }
  table {
    border: 1px solid red;
  }
</style>
<table>
  <tbody>
    <tr>
      <td>
        <h2>Lorem Ipsum</h2>
        <p>Fusce sodales lorem nec magna iaculis a fermentum lacus facilisis. Curabitur sodales risus sit amet neque fringilla feugiat. Ut tellus nulla, bibendum at faucibus ut, convallis eget neque. In hac habitasse platea dictumst. Nullam elit enim, gravida
          eu blandit ut, pellentesque nec turpis. Proin faucibus, sem sed tempor auctor, ipsum velit pellentesque lorem, ut semper lorem eros ac eros. Vivamus mi urna, tempus vitae mattis eget, pretium sit amet sapien. Curabitur viverra lacus non tortor
          luctus vitae euismod purus hendrerit. Praesent ut venenatis eros. Nulla a ligula erat. Mauris lobortis tempus nulla non scelerisque.
        </p>
      </td>
    </tr>
  </tbody>
</table>
<br>
<br>This TEXT IS BELOW and OUTSIDE the TABLE element. NOTICE how the red table border is pushed down below the end of paragraph due to bottom padding being specified for the tr element. The key point here is that the tr element must be displayed as a block
in order for padding to apply at the tr level.

0
Sunil

Il suffit d'écrire le code suivant dans votre fichier CSS

td{
  padding: 10px;
{
0
MD.JULHAS HOSSAIN MOHON