CSS Cell Margin

Question

CSS Cell Margin

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

123

html css cell margin css-tables

Источник

user85008 04 апр '09 в 03:28

16 ответов

Решение

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

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

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

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

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

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

Ура!

166

Источник

user359845 07 июн '10 в 02:35

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

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

35

Источник

user2087445 19 фев '13 в 14:11

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

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

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

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

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

15

Источник

23 июл '09 в 14:47

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

15

Источник

user696894 07 апр '11 в 13:33

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

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

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

13

Источник

user2250742 05 апр '13 в 21:21

Пытаться padding-right, Вы не можете положить marginНаходится между клетками.

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

10

Источник

user65387 04 апр '09 в 03:32

Это решение работает для 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>

4

Источник

user2827823 04 фев '14 в 11:19

Использование 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

Источник

user4121124 28 окт '14 в 22:58

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

3

Источник

user42979 04 апр '09 в 03:32

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

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

table td {
    padding-left: 20px;
}

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

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

2

Источник

user167129 05 мар '13 в 22:41

РЕШЕНИЕ

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

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

2

Источник

user301250 03 июл '13 в 03:32

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

Источник

user5514954 17 дек '15 в 07:00

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

padding-right:10px;

padding-right:10%;

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

1

Источник

user3901944 19 май '16 в 11:16

Если заполнение не работает, другой обходной путь - добавить дополнительные столбцы и установить поле по ширине, используя <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; }

1

Источник

user1070523 17 июн '16 в 02:52

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

1

Источник

user1940471 01 янв '13 в 02:43

Другие вопросы по тегам html css cell margin css-tables

user3661 04 апр '09 в 03:32 2009-04-04 03:32 · Accepted Answer · 2009-04-04 03:32

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

padding-right:10px;

Пример HTML:

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

114

Источник

user3661 04 апр '09 в 03:32