Поле ячейки CSS
-
23-08-2019 - |
Вопрос
В моем HTML-документе есть таблица с двумя столбцами и несколькими строками.Как я могу увеличить пространство между первым и вторым столбцом с помощью CSS?Я попробовал применить «margin-right:10px;» для каждой ячейки слева, но безрезультатно.
Решение
Примените это к своему первому <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 – Таблицы – Визуальное расположение содержимого таблиц
Элементы внутренних таблиц генерируют прямоугольные коробки с содержанием и границами.Ячейки также имеют отступы.Внутренние элементы таблицы не имеют маржи.
Какой тогда «правильный» путь?Если вы ищете замену cellspacing
атрибут таблицы, затем border-spacing
(с border-collapse
отключен) является заменой.Однако, если требуются «поля» для каждой ячейки, я не уверен, как этого можно правильно достичь с помощью CSS.Единственный хак, о котором я могу думать, это использовать padding
как указано выше, избегайте любого стиля ячеек (цвета фона, границ и т. д.) и вместо этого используйте контейнеры DIV внутри ячеек для реализации такого стиля.
Я не эксперт по 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.
К сожалению, поле не работает для отдельных ячеек, однако вы можете добавить дополнительные столбцы между двумя ячейками, между которыми хотите разместить пробел...другой вариант — использовать рамку того же цвета, что и фон...
Вы можете просто сделать это:
<html>
<table>
<tr>
<td>one</td>
<td width="10px"></td>
<td>two</td>
</tr>
</table>
</html>
CSS не требуется :) Эти 10 пикселей — ваше пространство.
Пытаться padding-right
.Вам не разрешено ставить margin
между клетками.
<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;
}
Обратите внимание: ширина таблицы должна включать ширину отступов/полей.Используя приведенный выше пример, визуальная ширина таблицы составит 700 пикселей.
Это не лучшее решение, если вы используете границы ячеек таблицы.
РЕШЕНИЕ
Я обнаружил, что лучшим способом решения этой проблемы является сочетание метода проб и ошибок и чтения того, что было написано до меня:
Как видите, у меня происходят довольно сложные вещи...но главное, чтобы это выглядело хорошо:
РОДИТЕЛЬСКИЙ ЭЛЕМЕНТ (UL):коллапс границы:отдельный;расстояние между границами:.25эм;поле слева:-.25эм;
ДЕТСКИЕ ЭЛЕМЕНТЫ (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; }
Следуя решению 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, чтобы второй и третий столбцы выглядели как один столбец.
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; }