CSS Cell Margin - PullRequest
Новая
       85

CSS Cell Margin

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

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

Ответы [ 16 ]

145 голосов
/ 07 июня 2010

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

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

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

Генерация внутренних элементов таблицы прямоугольные коробки с содержанием и границы. Клетки также имеют отступы. Внутренние элементы таблицы не имеют поля.

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

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

Ура!

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

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

padding-right:10px;

Пример HTML: 

<table>
   <tr>
      <td style="padding-right:10px">data</td>
      <td>more data</td>
   </tr>
</table>
24 голосов
/ 19 февраля 2013

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

table { 
           border-collapse: separate;
           border-spacing: 2px;
}
14 голосов
/ 07 апреля 2011

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

14 голосов
/ 23 июля 2009

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

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

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

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

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

9 голосов
/ 06 апреля 2013

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

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

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

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

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

<table>
   <tr>
      <td style="padding-right: 10px;">one</td>
      <td>two</td>
   </tr>
</table>
4 голосов
/ 29 октября 2014

Использование 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 голосов
/ 04 февраля 2014

Это решение подходит для 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>
2 голосов
/ 03 июля 2013

РЕШЕНИЕ

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

http://jsfiddle.net/MG4hD/


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

РОДИТЕЛЬСКИЙ ЭЛЕМЕНТ (UL): бордюр-коллапс: отдельный; интервал границы: .25em; поле слева: -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; }
Страница:
...