Поля ячейки CSS

96

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

html css cell margin css-tables Том
источник
Здесь есть хорошее решение CSS, недавно обновленное: stackoverflow.com/a/21551008/2827823
Ason

Ответы:

92

Примените это к своему первому <td>:

padding-right:10px;

Пример HTML:

<table>
   <tr>
      <td style="padding-right:10px">data</td>
      <td>more data</td>
   </tr>
</table>
роман м
источник
12
Гораздо лучшим подходом к этому было бы использование пограничного коллапса: отдельно
Гаурав Раманан
21
На всякий случай, если кто-то копировал / вставлял вышеупомянутый комментарий с помощью техники border-collapse: separateseparate
сглаживания границ
1
Кроме того, если вы хотите определить расстояние между границами, вам придется использоватьborder-spacing: 5px;
Sølve Tornøe
border-spacingтакже добавляет пространство между рядами. К сожалению, нет отдельного свойства для вертикального и горизонтального интервала.
Ли Блейк,
border-spacingпринимает два аргумента - один для горизонтального и один для вертикального.
OldTinfoil
152

Предупреждение: хотя это padding-rightможет решить вашу конкретную (визуальную) проблему, это неправильный способ добавлять интервалы между ячейками таблицы. То, что padding-rightделает для ячейки, аналогично тому, что она делает для большинства других элементов: она добавляет пространство внутри ячейки. Если у ячеек нет границы, цвета фона или чего-то еще, что выдает игру, это может имитировать эффект установки пространства между ячейками, но не иначе.

Как кто-то заметил, спецификации полей игнорируются для ячеек таблицы:

Спецификация CSS 2.1 - Таблицы - Визуальное оформление содержимого таблицы

Внутренние элементы таблицы создают прямоугольные блоки с содержимым и границами. У ячеек также есть отступы. Внутренние элементы таблицы не имеют полей.

Какой же тогда «правильный» путь? Если вы хотите заменить cellspacingатрибут таблицы, то border-spacing(с border-collapseотключенным) - это замена. Однако, если требуются "поля" для каждой ячейки, я не уверен, как этого можно правильно добиться с помощью CSS. Единственный прием, который я могу придумать, - это использовать, paddingкак указано выше, избегать какого-либо стиля ячеек (цвета фона, границы и т.д.) и вместо этого использовать контейнерные DIV внутри ячеек для реализации такого стиля.

Я не эксперт по CSS, поэтому могу ошибаться в приведенном выше (что было бы здорово знать! Мне тоже нужно решение CSS для полей таблицы).

Ура!

рави
источник
Это отлично и все для заполнения, но как насчет поля? Я хочу добавить пространство за пределами ячейки, содержащей границу. Маржа CSS, похоже, не влияет на ячейки.
Левитикон
1
Левитикон, правильно - поля не работают по причинам выше. Единственный способ получить то, что вы хотите, AFAIK, - это обернуть содержимое ячейки в DIV, добавить поля и границу к этому DIV, а не к ячейке.
ravi
Я опубликовал решение CSS давно (обновил его сегодня): stackoverflow.com/a/21551008/2827823
Асон,
28

Если вы не можете использовать отступы (например, у вас есть границы в td), попробуйте это

table { 
           border-collapse: separate;
           border-spacing: 2px;
}
nika206
источник
3
Вы можете узнать больше о крахе границы: отдельно здесь css-tricks.com/almanac/properties/b/border-collapse
Гаурав Раманан,
14

Я понимаю, что это довольно поздно, но для записи вы также можете использовать селекторы CSS для этого (устраняя необходимость во встроенных стилях). Этот CSS применяет отступы к первому столбцу каждой строки:

table > tr > td:first-child { padding-right:10px }

И это будет ваш HTML без CSS !:

<table><tr><td>data</td><td>more data</td></tr></table>

Это позволяет сделать разметку более элегантной, особенно в тех случаях, когда вам нужно выполнить большое количество специфического форматирования с помощью CSS.


источник
14

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

Циан
источник
Похоже, что у границы та же проблема, что и у заполнения - она ​​добавляет пространство между содержимым ячейки и границей, а не за пределами границы.
stewbasic
11

Вы можете просто сделать это:

<html>
<table>
    <tr>
        <td>one</td>
        <td width="10px"></td>
        <td>two</td>
    </tr>
</table>
</html>

CSS не требуется :) Это 10 пикселей - ваше пространство.

MrTrebor
источник
это хорошо, просто и эффективно, спасибо, что напомнили мне +1
Hayden Thring
8
Это не лучший подход для разделения структуры и стиля. Дело не в том, нужен ли CSS или нет - CSS следует использовать для чего-то вроде этого.
Саймон Робб
не должно быть <td style = "width: 10px;"> </td>
Rune Jeppesen
1
Помните, что самые простые решения - лучшие. Метод со встроенным стилем тоже хорош :)
MrTrebor
Это работает для моего конкретного случая. Очень креативно. Спасибо
Фан Ван Линь
7

Попробуй padding-right. Вам не разрешено ставить marginсимволы между ячейками.

<table>
   <tr>
      <td style="padding-right: 10px;">one</td>
      <td>two</td>
   </tr>
</table>
mpen
источник
4

Использование border-collapse: отдельные; не сработало для меня, потому что мне нужен только отступ между ячейками таблицы, а не по бокам таблицы.

Я придумал следующее решение:

- CSS

.tableDiv{
    display: table;
}

.cellSeperator {
    display: table-cell;
    width: 20px;
}

.cell1 {
    display: table-cell;
    width: 200px;
}

.cell2 {
    display: table-cell;
    width: 50px;
}

- HTML

<div class="tableDiv">
    <div class="cell1"></div>
    <div class="cellSeperator"></div>
    <div class="cell2"></div>
</div>
Робин
источник
4

Это решение работает как для tdтех, так borderи paddingдля стилизации.
(Проверено в Chrome 32, IE 11, Firefox 25)

CSS:
table {border-collapse: separate; border-spacing:0; }   /*  separate needed      */
td { display: inline-block; width: 33% }  /*  Firefox need inline-block + width  */
td { position: relative }                 /*  needed to make td move             */
td { left: 10px; }                        /*  push all 10px                      */
td:first-child { left: 0px; }             /*  move back first 10px               */
td:nth-child(3) { left: 20px; }           /*  push 3:rd another extra 10px       */

/*  to support older browsers we need a class on the td's we want to push
    td.col1 { left: 0px; }
    td.col2 { left: 10px; }
    td.col3 { left: 20px; }
*/

HTML:
<table>
    <tr>
        <td class='col1'>Player</td>
        <td class='col2'>Result</td>
        <td class='col3'>Average</td>
    </tr>
</table>

Обновлено 2016

Firefox теперь поддерживает его без inline-blockи набораwidth

table {border-collapse: separate; border-spacing:0; }
td { position: relative; padding: 5px; }
td { left: 10px; }
td:first-child { left: 0px; }
td:nth-child(3) { left: 20px; }
td { border: 1px solid gray; }


/* CSS table */
.table {display: table; }
.tr { display: table-row; }
.td { display: table-cell; }

.table { border-collapse: separate; border-spacing:0; }
.td { position: relative; padding: 5px; }
.td { left: 10px; }
.td:first-child { left: 0px; }
.td:nth-child(3) { left: 20px; }
.td { border: 1px solid gray; }
<table>
  <tr>
    <td>Player</td>
    <td>Result</td>
    <td>Average</td>
  </tr>
</table>

<div class="table">
  <div class="tr">
    <div class="td">Player</div>
    <div class="td">Result</div>
    <div class="td">Average</div>
  </div>
</div>
Развернуть фрагмент

Сын
источник
Это также работало для таблиц css (display: table *), сделанных из div.
Necreaux 03
2

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

Jerebear
источник
2

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

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

table td {
    padding-left: 20px;
}

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

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

Даллас Кларк
источник
2

РЕШЕНИЕ

Я обнаружил, что лучший способ решить эту проблему - это сочетание проб и ошибок и чтения того, что было написано до меня:

http://jsfiddle.net/MG4hD/


Как видите, у меня происходят довольно хитрые вещи ... но главное, чтобы это выглядело хорошо:

РОДИТЕЛЬСКИЙ ЭЛЕМЕНТ (UL): граница-развал: отдельно; интервал между границами: 0,25 мкм; маржа слева: -.25em;
ДЕТСКИЕ ЭЛЕМЕНТЫ (LI): дисплей: таблица-ячейка; вертикальное выравнивание: средний;

HTML

<ul>
<li><span class="large">3</span>yr</li>
<li>in<br>stall</li>
<li><span class="large">9</span>x<span class="large">5</span></li>
<li>on<br>site</li>
<li>globe</li>
<li>back<br>to hp</li>
</ul>

CSS

ul { border: none !important; border-collapse: separate; border-spacing: .25em; margin: 0 0 0 -.25em; }
li { background: #767676 !important; display: table-cell; vertical-align: middle; position: relative; border-radius: 5px 0; text-align: center; color: white; padding: 0 !important; font-size: .65em; width: 4em; height: 3em; padding: .25em !important; line-height: .9; text-transform: uppercase; }
Oneezy
источник
1

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

Виталий Чернобыль
источник
1 

<!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>
Развернуть фрагмент

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

Сенготтайский Картик
источник
Это решение уже опубликовано, нет необходимости в двух ответах, говорящих об одном и том же.
Ason
1

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

padding-right:10px;

padding-right:10%;

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

Мухаммад Авайс
источник
1
Я проголосовал за, но вы, возможно, объяснили, почему его лучше использовать%
Мэг говорит, что нужно восстановить Монику
1
Обычно% используется, чтобы сделать отзывчивым.
Мухаммад Авайс,
1
Плюс один - может быть, вы могли бы отредактировать свой ответ, чтобы так сказать? Не очень-то, кто читает, может прочитать комментарии .. Если вы хотите добавить ссылку на что-нибудь об
адаптивном
1

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

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

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

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; }
Эзра
источник
Это маскировка проблемы, а не ответ на нее. Никто не научится делать это должным образом, делая это
Мэг говорит, восстановить Монику