CSS Cell Margin - PullRequest
Новая
       92

CSS Cell Margin

83 голосов
/ 04 апреля 2009

В моем HTML-документе у меня есть таблица с двумя столбцами и несколькими строками. Как я могу увеличить пространство между первым и вторым столбцом с помощью CSS? Я пытался применить "margin-right: 10px;" к каждой ячейке с левой стороны, но безрезультатно.

Ответы [ 16 ]

2 голосов
/ 06 марта 2013

Если вы контролируете ширину таблицы, вставьте отступ слева во все ячейки таблицы и вставьте отрицательный отступ слева во всю таблицу. 

table {
    margin-left: -20px;
    width: 720px;
}

table td {
    padding-left: 20px;
}

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

Это не лучшее решение, если вы используете границы в ячейках таблицы.

2 голосов
/ 04 апреля 2009

Таким способом нельзя выделить отдельные столбцы в ячейке. На мой взгляд, ваш лучший вариант - добавить style='padding-left:10px' во второй столбец и применить стили к внутреннему элементу div или элементу. Таким образом, вы можете достичь иллюзии большего пространства.

1 голос
/ 19 мая 2016

Вы можете использовать оба из них: 

padding-right:10px;

padding-right:10%;

Но лучше использовать с % .

1 голос
/ 17 декабря 2015 

<!DOCTYPE html>
<html>
<head>
<style>
table{
border-spacing: 16px 4px;
}

 td {
    border: 1px solid black;
}
</style>
</head>
<body>

<table style="width:100%">
  <tr>
    <td>Jill</td>
    <td>Smith</td>		
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>		
    <td>94</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>		
    <td>80</td>
  </tr>
</table>

</body>
</html>

Использование отступов не является правильным способом, оно может изменить внешний вид, но это не то, что вы хотели. Это может решить вашу проблему.

1 голос
/ 01 января 2013

Следуя решению Cian'а установить границу вместо поля, я обнаружил, что вы можете установить прозрачный цвет границы, чтобы избежать совпадения цвета фона. Работает в FF17, IE9, Chrome v23. Похоже, приличное решение при условии, что вам также не нужна фактическая граница.

0 голосов
/ 17 июня 2016

Если заполнение не работает, другой способ - добавить дополнительные столбцы и установить поле по ширине, используя <colgroup>. Ни одно из перечисленных выше решений заполнения не сработало для меня, так как я пытался задать границу самой ячейки, и это в конечном итоге решило проблему: 

<table>
  <colgroup>
    <col>
    <col width="20px">
    <col>
  </colgroup>
  <tr>
     <td>data</td>
     <td></td>
     <td>more data</td>
   </tr>
</table>

Стиль границ ячеек таблицы с помощью: nth-child, чтобы 2-й и 3-й столбцы выглядели как один столбец. 

table tr td:nth-child(2) { border: 1px solid black; border-right:0; }
table tr td:nth-child(3) { border: 1px solid black; border-left:0; }
Страница:
...