web-dev-qa-db-fra.com

Insertion d'une ligne de tableau vide avec une hauteur inférieure

J'ai une table composée d'une ligne d'en-tête et de deux 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 ait une hauteur inférieure à celle des autres lignes (afin qu'il n'y ait pas un tel espace).

Comment puis-je accomplir cela?

Mon code de balisage HTML pour la table est le suivant:

<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>
htmlcsshtml-table
40
Ed.

Ajoutez simplement la règle CSS (et la marge légèrement améliorée) affichée ci-dessous et vous obtiendrez le résultat recherché.

CSS

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

HTML

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

Comme je n'ai aucune idée de ce à quoi ressemble votre feuille de style actuelle, j'ai ajouté la propriété !important au cas où. Si possible, cependant, vous devriez le supprimer car on veut rarement se fier aux déclarations !important dans une feuille de style, étant donné la grande possibilité qu'elles le fassent plus tard.

48
Tom

Vous n'avez pas besoin d'une ligne de table supplémentaire pour créer de l'espace à l'intérieur d'une table. Voir ce jsFiddle .
(J'ai rendu l’écart gris clair, afin que vous puissiez le voir, mais vous pouvez le changer en transparent.)

L'utilisation d'une ligne de tableau uniquement à des fins d'affichage constitue un abus de table!

8
Mr Lister

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

Il suffit d'ajouter 

<tr height = 20px></tr>

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

6
Alwin G

Essaye ça:

<td bgcolor="#FFFFFF" style="line-height:10px;" colspan=3>&nbsp;</td>
6
Barry Kaye

Celui-ci fonctionne pour moi:

<tr style="height: 15px;"/>
2
Kim Homann

Je voulais obtenir la même chose que celle demandée dans cette question, mais la réponse acceptée ne fonctionnait pas pour moi dans May, 2018 (la réponse est peut-être trop ancienne ou pour une autre raison). J'utilise bootsrap 3.3.7 et ionic v1. Vous devez définir line-height pour définir la hauteur d’une ligne spécifique.

.blank_row {
  line-height: 3px;
}
<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>

0
VicJordan