Поля в CSS ячейки

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

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

В CSS 2.1 спецификации – таблицы – макет содержимое таблицы

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

Что'ы с "Право" и как тогда? Если вы ищете, чтобы заменить cellspacing атрибут стола, затем границы-интервал(сграницы-крахотключен) замена. Однако, если на сотовый, то "поля" и не требуется, я не уверен, как это может быть выполнена с помощью CSS. Единственный Хак, я могу думать, является использованиеобивка`, как указано выше, избежать любой стиль ячейки (цвет фона, границ и т. д.) и вместо того, чтобы использовать контейнер ДИВС внутри клетки для реализации подобного стайлинга.

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

Ура!

Примените это к вашей первой <тд>:

padding-right:10px;

HTML пример:

<table>
   <tr>
      <td style="padding-right:10px">data</td>
      <td>more data</td>
   </tr>
</table>

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

table { 
           border-collapse: separate;
           border-spacing: 2px;
}

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

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

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

И это будет ваш HTML, без УСБ!:

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

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

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

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

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

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

<table>
   <tr>
      <td style="padding-right: 10px;">one</td>
      <td>two</td>
   </tr>
</table>

Используя границы-крах: отдельные; Я't работа для меня, потому что мне нужна только маржа между ячейками таблицы не по бокам стола.

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

-УСБ

.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>

Это решение работает для ТД's, который нужен как граница и обивка для укладки. (Проверено на Chrome 32, т. е. 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 теперь поддерживает его без инлайн-блок и ширина набора ``

в

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>

в

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

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

table td {
    padding-left: 20px;
}

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

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

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

Решение

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

http://jsfiddle.net/MG4hD/

<БР> Как вы можете видеть у меня есть некоторые довольно сложные дела... но главный прикол это хорошо выглядящий являются:

Родительский элемент (ул): границы-крах: отдельные; границы интервал: .25em; маржи-левой: -.25em; <БР> Дочерние элементы (литий): отображения: настольный клетку; вертикальный-выровняйте: середина;

В формате 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>

УСБ

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; }

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

в

table{
border-spacing: 16px 4px;
}

 td {
    border: 1px solid black;
}




<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>

в

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

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

padding-right:10px;

padding-right:10%;

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

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

<table>





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

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

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; }