L'insertion d'une ligne de tableau vide avec une petite hauteur

J'ai un tableau composé d'une ligne d'en-tête et un couple de lignes de données. Ce que je veux faire est de créer une ligne vide entre l'en-tête et les lignes de données, mais je veux que cette ligne vide à être plus petite en hauteur que les autres lignes (de sorte qu'il n'y a pas un tel grand écart).

Comment puis-je y arriver?

Mes balises HTML du code de la table est comme suit:

<table class="action_table">
    <tbody>
        <tr class="header_row">
            <td>Header Item</td>
            <td>Header Item 2</td>
            <td>Header Item 3</td>
        </tr>            
        <tr class="blank_row">
            <td bgcolor="#FFFFFF" colspan="3">&nbsp;</td>
        </tr>
        <tr class="data_row">
            <td>Data Item</td>
            <td>Data Item 2</td>
            <td>Data Item 3</td>
        </tr>
    </tbody>
</table>
InformationsquelleAutor Ed. | 2012-03-16
  1. 53

    Il suffit d'ajouter la règle CSS (et de la légère amélioration de mark-up) posté ci-dessous et vous devriez obtenir le résultat que vous recherchez.

    CSS

    .blank_row
{
    height: 10px !important; /* overwrites any other rules */
    background-color: #FFFFFF;
}

    HTML

    <tr class="blank_row">
    <td colspan="3"></td>
</tr>

    Depuis je n'ai aucune idée de ce que votre feuille de style actuel ressemble, j'ai ajouté la !important propriété juste au cas où. Si possible, cependant, vous devez l'enlever aussi rarement veut invoquer !important déclarations dans une feuille de style compte tenu de la grande possibilité qu'ils vont louper plus tard.

    InformationsquelleAutor Tom
  2. 8

    Vous n'avez pas besoin d'un supplément de ligne de la table pour créer un espace à l'intérieur d'un tableau. Voir cette jsFiddle.

    (J'ai fait de l'écart de la lumière de couleur grise, de sorte que vous pouvez le voir, mais vous pouvez changer cela en transparent).

    À l'aide d'une ligne de la table juste à des fins d'affichage de la table de l'abus!

    • Vous avez raison et j'aime l'élégance de votre solution. J'ai besoin de quelques séparation ailleurs dans le tableau en tant que bien. Donc, compte tenu de la compatibilité avec mon actuelle de codage, je vais prendre la voie facile.
    InformationsquelleAutor Mr Lister
  3. 7

    Essayez ceci:

    <td bgcolor="#FFFFFF" style="line-height:10px;" colspan=3>&nbsp;</td>
    • En XHTML 1.0 Strict, la style="" attribut n'est pas autorisée. Votre code doit être le même pour tout le doctype.
    • Vous plaisantez? Selon XHTML 1.0 Strict, le style attribut est le seul attribut correct dans Barry exemple!
    • Selon mon cours de HTML, le XHTML Strict, on ne peut pas utiliser le style attribut?
    • Si ils ont dit ça comme ça, ils avaient tort. Ils auraient essayé de dire que c'est généralement une meilleure idée de mettre tous styles confondus dans une autre feuille de style, de sorte que vous n'aurez pas à chercher à travers tous vos sources html si vous voulez changer quelque chose. (Pas de différences entre HTML et XHTML, là.) Et parfois, un style en ligne est tout simplement la chose la plus commode, par exemple pour éviter de !important ou des circonstances comme ça.
    InformationsquelleAutor Barry Kaye
  4. 6

    Je sais que cette question a déjà une réponse, mais j'ai trouvé un moyen encore plus simple façon de le faire.

    Juste ajouter 

    <tr height = 20px></tr>

    Dans la table où vous voulez avoir une ligne vide. Il fonctionne très bien dans mon programme et c'est probablement la solution la plus rapide possible.

    InformationsquelleAutor Alwin G
  5. 3

    Celui-ci fonctionne pour moi:

    <tr style="height: 15px;"/>
    InformationsquelleAutor Kim Homann
  6. 0

    Je voulais atteindre le même comme demandé dans cette question, mais a accepté la réponse n'a pas de travail pour moi dans May, 2018 (peut-être que la réponse est trop vieux ou une autre raison). Je suis à l'aide de bootsrap 3.3.7 et ionic v1.
    Vous devez définir line-height de faire régler la hauteur de ligne spécifique.

    CSS:

    .blank_row {
  line-height: 3px;
}

    HTML:

    <table class="action_table">
  <tbody>
    <tr class="header_row">
      <td>Header Item</td>
      <td>Header Item 2</td>
      <td>Header Item 3</td>
    </tr>
    <tr class="blank_row">
      <td bgcolor="#000" colspan="3">&nbsp;</td>
    </tr>
    <tr class="data_row">
      <td>Data Item</td>
      <td>Data Item 2</td>
      <td>Data Item 3</td>
    </tr>
  </tbody>
</table>

    InformationsquelleAutor Vikasdeep Singh
  7. -3

    Je ne pouvais pas trouver quelque chose à travailler jusqu'à ce que j'ai essayé cette simple ligne:

    <p style="margin-top:0; margin-bottom:0; line-height:.5"><br /></p>

    qui permet de varier un remplissage de la ligne de hauteur à votre contenu de coeurs
    (J'ai été [probablement Abuser de la Table pour obtenir trois colonnes (boîtes) de texte que j'ai ensuite voulu s'alignent le long du bas)

    Je suis un amateur de sorte voudrions commentaires

    • Je devrais avoir une reconnaissance de la source: gokgs.com/help/_it_IT/EditorsTipsAndTricks.html - mais ils ne semblent pas avoir un contact avec la route ... et on dirait que c'est un peu certains de grande puissance jeu set-up ... et j'ai évité jusqu'à présent qu'une dépendance de l'itinéraire depuis que de rester debout toute la nuit ~il y a 30 ans avec Space Invaders
    • Pour info, lorsque vous voulez avoir le code source dans votre réponse, tiret cette ligne avec 4 espaces au début, Cela vous permettra d'avoir < > balises
    InformationsquelleAutor Saeta Negra