Dev Faq
1
votes

Comment puis-je minimiser le "remplissage" du haut et du bas pour les cellules de tableau HTML?

J'essaie de rendre un tableau avec un remplissage de cellule de texte aussi petit que possible au-dessus et en dessous.

L'extrait ci-dessous montre ce que j'ai fait jusqu'à présent. Cependant, il contient toujours un «remplissage» supérieur et inférieur visible pour le texte de la cellule.

Quelles autres options CSS existent pour réduire cet espace blanc au-dessus du texte, de sorte que le texte soit rendu juste en dessous de la ligne du haut, et la ligne du bas soit dessinée juste en dessous du texte sans espace? p > 

<!DOCTYPE html>
<html>

<head>
  <META http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>Table Test</title>
</head>

<body>
  <table>
    <tr>
      <td>
        First row
      </td>
    </tr>
    <tr>
      <td>
        Second row
      </td>
    </tr>
  </table>
</body>

</html>
td {
  border: 1px solid silver;
  line-height: 1;
}

table {
  border-collapse: collapse;
}

Merci beaucoup pour les réponses jusqu'à présent!

Dans mon cas, les familles de polices et les tailles de police réelles sont inconnues, cela signifie que le CSS ne peut pas utiliser de valeurs fixes pour la hauteur de ligne car cela présente le risque de couper des caractères. Je recherche donc une solution «canonique» et sûre.

Idéalement, il n'y a qu'un seul paramètre CSS qui fait disparaître le «décalage» entre le texte et la bordure, et fonctionne avec toutes les familles de polices et toutes les polices tailles (il peut y avoir plus d'une police utilisée dans une seule cellule).

5 commentaires

changer la hauteur de ligne du texte peut aider

padding: 0 à td?

@AndreF oui, cela a un petit effet. Cependant, il reste un rembourrage visible à gauche

N'utilisez pas de p dans votre td ... Sauf si vous voulez dire vraiment que vous avez un paragraphe de texte. Voir Est-il bon de mettre

à l'intérieur de pour mettre du contenu texte?

@HereticMonkey J'ai supprimé le p (rend l'exemple plus lisible)

5 Réponses :

0
votes

Essayez ceci: 

body,
p {
  margin: 0px;
}

td {
  border: 1px solid silver;
  padding:0; 
  margin:0;
}

table {
  border-collapse: collapse;
}

Cela minimise encore plus la marge et le remplissage dans la cellule.

3 commentaires

Avec Firefox et Chrome, je ne vois aucune différence. Quel navigateur utilisez-vous pour tester?

J'utilise Chrome v74.0.3729.169 et je peux voir une petite différence.

Même version ici, je ne suis pas sûr de ce qui ne va pas avec mon navigateur. Je vais réessayer.

0
votes

Avez-vous essayé d'ajouter un div sur chaque ligne pour les placer en bas de la marge?

Comme ça: 

body,
p {
  margin: 0px;
}

td {
  border: 1px solid silver;
}

table {
  border-collapse: collapse;
}

 .FirstRow {
  margin-bottom: ...px;
}

 .SecondRow {
  margn-bottom: ...px;
}

 table {
  border-collapse: collapse;
}

et 

<!DOCTYPE html>
<html>

<head>
  <META http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>Table Test</title>
</head>

<body>
  <table>
    <tr>
      <td>
        <p>
   <div class="FirstRow">
          First row
   </div>
        </p>
      </td>
    </tr>
    <tr>
      <td>
        <p>
          <div class="SecondRow">
          Second row
          </div>
        </p>
      </td>
    </tr>
  </table>
</body>

</html>

2 commentaires

Comment l'ajout d'éléments supplémentaires au HTML réduirait-il la quantité d'espace? Veuillez modifier votre question pour expliquer en quoi cela répond au problème du PO.

Bonjour, j'ai ajouté l'élément

en html pour les modifier en css. Et puis ajoutez une marge en haut: ... px; pour réduire le rembourrage

0
votes

Essayez ceci: 

td div{
    margin-top: -4px; /* or value which suits your design */
}

....
<td><div>Your Data</div></td>
....

Que diriez-vous de ceci?: 

td {
  line-height: 10px; /* or value which suits your design */
}

5 commentaires

hauteur de ligne: 1; (sans unité) est la méthode recommandée developer.mozilla.org/en -US / docs / Web / CSS / line-height - Je n'ai pas de contrôle sur les tailles de police réelles, je ne peux donc pas utiliser une valeur fixe

«Essayez ceci» est rarement une bonne réponse. Mieux vaut expliquer pourquoi vous suggérez le code présent dans la réponse.

@Heretic Monkey, la propriété line-height contrôle l'espace entre les lignes de texte. Comme nous le savons, par défaut, TD est automatiquement redimensionné en fonction de son contenu enfant. Donc, le forcer à réduire l'espace de ligne pourrait faire l'affaire.

Modifiez votre question avec l'explication afin que l'OP et les futurs visiteurs le sachent.

Dans le cas de la propriété css

margin-top accepte également les valeurs négatives, vous pouvez donc pousser le div pour passer à travers / chevaucher la marge par défaut.

0
votes

la cellule elle-même donne également un remplissage. Veuillez donc indiquer "padding: 0" et "line-height: .9em" (90% de la taille de la police). 

<!DOCTYPE html>
<html>

<head>
  <title>Table Test</title>
</head>

<body>
  <table>
    <tr>
      <td>
        <p>
          First row
        </p>
      </td>
    </tr>
    <tr>
      <td>
        <p>
          Second row jygq
        </p>
      </td>
    </tr>
  </table>
</body>

</html>

body,
p {
  margin: 0;
}

td {
  border: 1px solid silver;
  vertical-align:top;
  line-height:.9em;
padding:0;

}

table {
  border-collapse: collapse;
    border: 1px solid;
   
}
td {
  border: 1px solid silver;
  padding:0;
  line-height:.9em;
}

13 commentaires

«Essayez ceci» est rarement une bonne réponse. Mieux vaut expliquer pourquoi vous suggérez le code présent dans la réponse.

Pardon. J'ai ajouté le lien JSFiddle

L'ajout d'un lien JSFiddle était orthogonal à ce que je disais :). Vous devez expliquer comment votre code résout le problème de l'OP. Notez que vous pouvez utiliser Stack Snippets au lieu de JSFiddle si vous souhaitez fournir un exemple exécutable.

La cellule elle-même donne également un rembourrage. Réinitialisez-le donc à zéro et réduisez la hauteur de ligne à .9em (90% de la taille de la police)

Modifiez votre question avec l'explication afin que l'OP et les futurs visiteurs le sachent.

J'utilise le débordement de pile pour la première fois. Désolé pour mon ignorance

Pas de soucis! Je veux juste m'assurer que votre réponse est la meilleure possible :).

Merci pour les conseils. J'ai ajouté Stack Snippets. :)

Merci beaucoup, mais avec une hauteur de ligne de 0,9, certains caractères peuvent être coupés - il existe peut-être une solution "plus sûre"

@mjn s'il vous plaît voir l'extrait

Merci beaucoup, veuillez consulter ma modification - les familles de polices et les tailles de police sont inconnues à l'avance, il y a donc un risque que des valeurs fixes pour la hauteur de ligne provoquent des caractères de coupure. Il peut également y avoir plusieurs polices utilisées dans une cellule.

Vous devez également définir le remplissage 0 sur la cellule @mjn

Veuillez noter que la valeur de la hauteur de ligne est en em - @mjn

1
votes

Commencez par définir la même famille de polices de cellules, ici vous ne décrivez qu'une seule famille de polices de cellules, c'est pourquoi les deux cellules ont une hauteur de ligne et un remplissage différents.

alors faites-en une seule famille de polices && faites une hauteur de ligne de 12px;

2 commentaires

Merci beaucoup, veuillez consulter ma modification - les familles de polices et les tailles de police sont inconnues, il y a donc un risque que des valeurs fixes pour la hauteur de ligne provoquent des caractères de coupure.

ok utiliser de cette façon td {margin: 0px; rembourrage: 0px; hauteur de ligne: 12px; } donc plus de remplissage et de marge, vous devez essentiellement spécifier la hauteur de ligne en pixels

Articles qui pourrait vous intéresser :

Google Chrome Uncaught (promis) DOMException lors de la lecture AUDIO
Select2 ne s'affiche pas correctement dans le mode bootstrap
Le bootstrap de Twitter a-t-il des classes utilitaires de taille de police?
Comment puis-je définir un format pour les nombres d'entrée dans Blazor