У моєму документі 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>border-collapse: separate(в правописі separateвище була помилка )
border-spacing: 5px;
border-spacingтакож додає простір між рядками. На жаль, немає окремої властивості для вертикального та горизонтального інтервалу.
border-spacingприймає два аргументи - один для горизонтального та один для вертикального.
Слово попередження: хоча це 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.
margin не працює, на жаль, для окремих комірок, однак ви можете додати додаткові стовпці між двома комірками, між якими ви хочете розмістити пробіл ... інший варіант - використовувати межу з тим же кольором, що і фон ...
Ви можете просто зробити це:
<html>
<table>
<tr>
<td>one</td>
<td width="10px"></td>
<td>two</td>
</tr>
</table>
</html>CSS не потрібен :) Ці 10 пікселів - це ваш простір.
Використання обвалення кордону: окремо; не спрацював для мене, оскільки мені потрібне лише поле між клітинками таблиці, не з боків таблиці.
Я придумав наступне рішення:
- 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>Якщо у вас є контроль над шириною таблиці, вставте відступ зліва в усі комірки таблиці та вставте від’ємне поле зліва на всю таблицю.
table {
margin-left: -20px;
width: 720px;
}
table td {
padding-left: 20px;
}Зверніть увагу, що ширина таблиці повинна включати ширину заповнення / поля. На прикладі вищезазначеного візуальна ширина таблиці становитиме 700 пікселів.
Це не найкраще рішення, якщо ви використовуєте межі для комірок таблиці.
Я знайшов найкращий спосіб вирішити цю проблему - поєднання спроб і помилок і читання написаного переді мною:
Як бачите, у мене трапляються досить хитрі речі ... але головним фактором, як це зробити, щоб виглядати добре, є:
БАТЬКОВИЙ ЕЛЕМЕНТ (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; }Наслідуючи рішення Сіана щодо встановлення межі замість поля, я виявив, що ви можете встановити колір межі на прозорий, щоб уникнути необхідності відповідності кольору фону. Працює в 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; }