it-swarm.com.ru

Добавьте пробел между двумя конкретными <td> s

У меня есть стол

<tr>
   <td>One</td>
   <td>Two</td>
   <td>Three</td>
   <td>Four</td>
</tr>

Как добавить пробел между <td>s ' Two ' и ' Three ' отдельно?

6
Shalin

Самый простой способ:

td:nth-child(2) {
    padding-right: 20px;
}​

Но это не сработает, если вам нужно работать с цветом фона или изображениями в вашей таблице. В этом случае вот немного более продвинутое решение (CSS3):

td:nth-child(2) {
    border-right: 10px solid transparent;
    -webkit-background-clip: padding;
    -moz-background-clip: padding;
    background-clip: padding-box;
}

Он размещает прозрачную границу справа от ячейки и оттягивает фоновый цвет/изображение от границы, создавая иллюзию расстояния между ячейками.

Примечание: чтобы это работало, родительская таблица должна иметь border-collapse: separate. Если вам нужно работать с border-collapse: collapse, то вы должны применить тот же стиль рамки к следующей ячейке таблицы, но с левой стороны, чтобы достичь тех же результатов.

14
Hubro

Простой ответ: дайте этим двум тдс поле стиля.

<tr>
<td>One</td>
<td style="padding-right: 10px">Two</td>
<td>Three</td>
<td>Four</td>
</tr>

Tidy one: используйте имя класса

<tr>
<td>One</td>
<td class="more-padding-on-right">Two</td>
<td>Three</td>
<td>Four</td>
</tr>

.more-padding-on-right {
  padding-right: 10px;
}

Сложный: использование селектора nth-child в CSS и указание для этих двух специальных значений отступов, что работает в современных браузерах.

tr td:nth-child(2) {
  padding-right: 10px;
}​
8
xiaoyi

вы должны установить cellpadding и cellspacing, вот и все.

<table cellpadding="5" cellspacing="5">
<tr> 
<td>One</td> 
<td>Two</td> 
<td>Three</td> 
<td>Four</td> 
</tr>
</table>
5
Lakshman Kambam

Попробуйте это Демо

HTML

<table>
    <tr>
        <td>One</td>
        <td>Two</td>
        <td>Three</td>
        <td>Four</td>
    </tr>
</table>

CSS

td:nth-of-type(2) {
   padding-right: 10px;
}
1
Mr. Alien

Ни один из ответов не сработал для меня. Самый простой способ - добавить <td>s между width = 5px и background='white' или любой другой цвет фона страницы.

Опять же, это не удастся, если у вас есть список <th>s, представляющий заголовки таблицы.

0
saran3h

я выбрал добавить td между двумя тегами td и установить для width значение 25px. Это может быть более или менее по своему вкусу. Это может быть глупо, но это просто, и это работает.

0
nik