Блог

Главная - Вопросы по программированию - Граница на td. Проблема с Html css

Граница на td. Проблема с Html css

#html #css

#HTML #css

Вопрос:

Вот чего я хочу достичь: 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>

Ответ №1:

У вас есть cellpadding и cellspacing установлено. Это вызывает пробелы.

Избавьтесь от них и вместо этого определите padding значения внутри td .

В качестве альтернативы вы можете установить, border-collapse: collapse; но в этом случае используйте border-spacing свойство CSS для установки пробелов. cellspacing и cellpadding не рекомендуются.

Комментарии:

1. да, я знаю, но тогда почему это работает на jsFiddle? И что мне нужно добавить в мой файл .css, чтобы он работал как в jsFiddle?

2. @привет, JSFiddle. у net есть table { border-collapse: collapse; } в их reset CSS, который имеет тот же эффект. Я добавлю это к своему ответу.