1

Estoy tratando de dejar un espacio entre las filas de una tabla en HTML pero no encuentro el modo de hacerlo. La tabla es esta:

#g-table tbody tr > td{
                    border: 1px solid rgb(220,220,220);
                    height: 30px;
                    padding-left: 3px;
                }
                #g-table{
                    padding-left: 40px;
                    margin-top: 20px;

                }
 <table id="g-table">
                <tbody>
                    <tr>
                    <th width="200px"><p type="text" style="display: inline; width:100px" value="Nombre">Empresa </p></th>
                    <th width="200px"><p type="text" style="display: inline; width:100px" value="Nombre">Representante </p></th>
                    <th width="200px"><p type="text" style="display: inline; width:100px" value="Nombre">Teléfono </p></th>
                    <th width="200px"><p type="text" style="display: inline; width:100px" value="Nombre">Móbil </p></th>
                    <th width="200px"><p type="text" style="display: inline; width:100px" value="Nombre">Correo electrónico </p></th>
                    <th width="200px"><p type="text" style="display: inline; width:100px" value="Nombre">Dirección </p></th>
                    <th width="200px"><p type="text" style="display: inline; width:100px" value="Nombre">CIF </p></th>
                    <th width="200px"><p type="text" style="display: inline; width:100px" value="Nombre">Página Web </p></th>

                    </tr>
                     <tr>
                     <td>GNU Linux</td>
                    <td>Linus Torvalds</td>
                    <td>678293384</td>
                    <td></td>
                    <td></td>
                    <td><input type="text" value="Helsinki, Finlandia" style="width: 200px; border: none; background-color: none;" readonly /></td>
                    <td>N0032484H</td>
                    <td></td>
                  </tr>
                   <tr>
                     <td>Empresa</td>
                    <td>Raul Giménez</td>
                    <td>937130082</td>
                    <td>67283726167</td>
                    <td>[email protected]</td>
                    <td></td>
                    <td>C-456789321</td>
                    <td>www.qwert.es</td>
                  </tr>
                   <tr>
                     <td>Illa Activa</td>
                    <td>Josep Illa Fernandez</td>
                    <td>93828386872</td>
                    <td></td>
                    <td>[email protected]</td>
                    <td>Cabrils, España</td>
                    <td></td>
                    <td>www.acbd.com</td>
                  </tr>
                   


                </tbody>                
            </table>

Quiero dejar espacio solamente entre las filas y no las columnas

1 respuesta 1

4

No puedes usar margin, pero puedes crear un tr con una clase que le de altura para generar el espacio, tu código quedaría así:

 #g-table tbody tr > td{
                    border: 1px solid rgb(220,220,220);
                    height: 30px;
                    padding-left: 3px;
                }
                #g-table{
                    padding-left: 40px;
                    margin-top: 20px;

                }
                .espacio{
					height:10px;
				}
 <table id="g-table">
                <tbody>
                    <tr>
                    <th width="200px"><p type="text" style="display: inline; width:100px" value="Nombre">Empresa </p></th>
                    <th width="200px"><p type="text" style="display: inline; width:100px" value="Nombre">Representante </p></th>
                    <th width="200px"><p type="text" style="display: inline; width:100px" value="Nombre">Teléfono </p></th>
                    <th width="200px"><p type="text" style="display: inline; width:100px" value="Nombre">Móbil </p></th>
                    <th width="200px"><p type="text" style="display: inline; width:100px" value="Nombre">Correo electrónico </p></th>
                    <th width="200px"><p type="text" style="display: inline; width:100px" value="Nombre">Dirección </p></th>
                    <th width="200px"><p type="text" style="display: inline; width:100px" value="Nombre">CIF </p></th>
                    <th width="200px"><p type="text" style="display: inline; width:100px" value="Nombre">Página Web </p></th>

                    </tr>
                     <tr>
                     <td>GNU Linux</td>
                    <td>Linus Torvalds</td>
                    <td>678293384</td>
                    <td></td>
                    <td></td>
                    <td><input type="text" value="Helsinki, Finlandia" style="width: 200px; border: none; background-color: none;" readonly /></td>
                    <td>N0032484H</td>
                    <td></td>
                  </tr>
                  <tr class="espacio"></tr>
                   <tr>
                     <td>Empresa</td>
                    <td>Raul Giménez</td>
                    <td>937130082</td>
                    <td>67283726167</td>
                    <td>[email protected]</td>
                    <td></td>
                    <td>C-456789321</td>
                    <td>www.qwert.es</td>
                  </tr>
                  <tr class="espacio"></tr>
                   <tr>
                     <td>Illa Activa</td>
                    <td>Josep Illa Fernandez</td>
                    <td>93828386872</td>
                    <td></td>
                    <td>[email protected]</td>
                    <td>Cabrils, España</td>
                    <td></td>
                    <td>www.acbd.com</td>
                  </tr>
                   


                </tbody>                
            </table>

1
  • 1
    viendo las opciones que tengo me parece buena solución, no se me había ocurrido. Muchas gracias Nicolás
    – gmarsi
    Commented el 5 jun. 2017 a las 18:14

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.