Question

Here what I want to achieve: http://jsfiddle.net/LxwXc/3/

When I have this code in my website, I have gaps between tds. Do you have any ideas what can it be? I am just going crazy…

.goodtable td

{

    border-bottom: 1px solid black;

    border-left: none;

    border-right: none;

    border-top: none;

    padding: 10px;

}

</style>



<table class="goodtable" cellpadding="10" cellspacing="8">  

    <tr>

        <td width="150px">Username:</td> 

        <td width="150px">opera</td>

    </tr>



    <tr>

        <td>Gender:</td> 

        <td>Male</td>

    </tr>    



    <tr>

        <td>Age:</td> 

        <td>19 (1992-01-01)</td>

    </tr>



    <tr>

        <td>Country, city:</td> 

        <td>hey, Afghanistan</td>

    </tr>




    <tr>

        <td>Height:</td> 

        <td>187 centimetres</td>

    </tr>


</table>

Answer 1

You have cellpadding and cellspacing set. Those are causing the gaps.

Get rid of them, and define padding values inside the td instead.

Alternatively, you can set border-collapse: collapse; but in that case, use the border-spacing CSS property to set the spaces. cellspacing and cellpadding are deprecated.