td上的邊框。 Html的CSS問題

Question

在這裏，我想實現的：http://jsfiddle.net/LxwXc/3/

當我在我的網站上的這段代碼，我有tds之間的差距。你有什麼想法嗎？我只是要瘋了......

.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

你有cellpadding和cellspacing集。這些正在造成差距。

擺脫它們，並在td內定義padding值。

或者，您可以設置border-collapse: collapse;，但在這種情況下，請使用border-spacing CSS屬性設置空格。 cellspacing和cellpadding已棄用。