web-dev-qa-db-fra.com

comment casser une ligne ou un espace entre deux lignes du tableau html

Je dois laisser un espace ou une pause entre deux lignes pour que ma page soit belle.

si vous regardez mon code, j’avais donné beaucoup de lignes et de colonnes vides pour faire un espace entre deux lignes de la table.

Veuillez indiquer toute autre méthode appropriée pour laisser un espace entre deux rangées.

voici mon exemple de code:

<form:form name="form" method="post" modelAttribute="Abatch">

 <table>
<tr>
    <td>Please enter your comments</td>
    <td><form:textarea id="textarea" style="width:150%;height:150%" path="Comments" size="255" readonly="false" /></td>
</tr>
<tr>
<tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
</tr>
</tr>
<tr>     
   <td><input id="button1"   type="submit" name="submit" value="Approve"/></td>
   <td><input id="button4"  type="submit" name="submit" value="Reject"/></td>

  </tr>
</table>
htmlcsshtml-table
5
Yellow Flash

Selon le modèle de boîte CSS:

les valeurs de marge ne s'appliquent pas aux lignes et aux cellules du tableau
Voir: http://www.w3.org/TR/CSS2/box.html#margin-properties

les valeurs de remplissage et de bordure ne s'appliquent pas aux lignes du tableau, mais aux cellules du tableau
Voir: http://www.w3.org/TR/CSS2/box.html#padding-properties

Une solution rapide consiste à ajouter un remplissage en haut de la ligne que vous souhaitez séparer.

Par exemple: http://jsfiddle.net/audetwebdesign/caXsZ/

Exemple HTML:

<table cellpadding="0" cellspacing="0" border="0">
    <tr class="row1">
        <td>Row One - 1</td>
        <td>Row One - 2</td>
    </tr>
    <tr class="row2">
        <td>Row Two - 1</td>
        <td>Row Two - 2</td>
    </tr>    
</table>

CSS: 

td {
    border: 1px dotted blue;
}
tr.row2 td {
    padding-top: 40px;
}

Si vous souhaitez styler les bordures autour des cellules de votre tableau, vous devrez peut-être ajouter des wrappers autour du contenu et appliquer des bordures en fonction des détails de la conception.

8
Marc Audet

Essaye ça:

<tr>
    <td>
        Row 1
    </td>
</tr>
<tr>
    <td>
        &nbsp;
        <!--you just need a space in a row-->
    </td>
</tr>
<tr>
    <td>
        Row 2
    </td>
</tr>
13
MJ33

La méthode correcte pour espacer les tableaux consiste à utiliser cellpadding et cellpacing.

<table cellpadding="4">

ou en utilisant css:

<style type='text/css'>    
  table{ border-collapse: separate; }
  table td { border-spacing: 1em; }
</style>
4
Charaf JRA
border spacing attribute has to be specified in CSS

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

Le code ci-dessus définit un espacement de 10 px entre les lignes et un espacement de 0 px entre les colonnes

4
Sudharsun

Définissez l'attribut margin pour une balise <tr>:

<tr style="margin-top:10px;"></tr>

Ou faites la table entière avec ce style:

<style>
    table tr {
        margin-top: 10px;
    } 

    table tr:first-child {
       margin-top: 0px; !important
    }
</style>
2
Gustavo Gondim

Cela peut être réalisé comme ça. 

<tr> <td> <br> </td> <!--The br tag did what i was looking for --> </tr>

1
anand24

La solution qui a fonctionné pour moi consiste à définir les propriétés css au niveau des colonnes et à définir colspan comme le nombre de colonnes du tableau

Html -

<tr class="border_bottom">
    <td colspan="6"></td>
</tr>

CSS -

tr.border_bottom td {
    border-bottom: 1px solid #cccccc;
    color: #707070;
}

table{
    border-collapse: collapse;
}
0
Pukhraj soni