space between rows of an HTML table

0

I'm trying to leave a space between the rows of a table in HTML but I can not find the way to do it. The table is this:

#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>

I want to leave space only between the rows and not the columns

    
asked by gmarsi 05.06.2017 в 19:54
source

1 answer

1

You can not use margin, but you can create a tr with a class that gives it height to generate the space, your code would look like this:

 #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>
    
answered by 05.06.2017 / 20:06
source