Поле ячейки CSS


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

16 76

16 ответов:

применить это к вашему первому <td>:

padding-right:10px;

пример HTML:

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

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

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

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

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

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

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

Ура!

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

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

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

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

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

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

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

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

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

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

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

попробовать padding-right. Тебе нельзя ставить margin ' s между клетками.

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

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

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

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

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

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

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

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

table td {
    padding-left: 20px;
}

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

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

решение

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

http://jsfiddle.net/MG4hD/


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

родительский элемент (UL): border-collapse: separate; border-spacing:.25em; margin-left: -.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>

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

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

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

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

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

padding-right:10px;

padding-right:10%;

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

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

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

стилизуйте границы ячеек таблицы с помощью :nth-child так, чтобы 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; }