Межстрочный интервал ячейки таблицы CSS: как?
Надеюсь, это непросто, но я не нашел решения. Я хочу разместить пробел между столбцами на таблице.
Пример
| Cell |<- space ->| Cell |<- space ->| Cell |
Важным моментом является то, что я не хочу места на краях. Существует свойство border-spacing, но оно не поддерживается в IE (6 или 7), так что это не хорошо. Он также помещает пространство по краям.
Лучшее, что я придумал, - это положить padded-right: 10px на мои ячейки таблицы и добавить класс к последнему, чтобы удалить дополнение. Это меньше, чем идеально, потому что дополнительное пространство является частью ячейки, не находящейся за ее пределами. Думаю, вы могли бы сделать то же самое с прозрачной рамкой?
Я также попытался использовать jQuery:
$(function() {
$("table > tbody > tr:not(:last-child").addClass("right-padding");
});
но даже в таблицах, размер которых составляет всего ~ 100, в некоторых случаях это принимало 200-400 мс, что слишком медленно.
Любая помощь была оценена.
Спасибо
Для тех, кто предлагает столбцы, они не работают. Попробуйте следующее:
<html>
<head>
<title>Layout</title>
<style type="text/css">
table { border: 1px solid black; }
td { background: yellow; }
</style>
</head>
<body>
<table>
<col style="padding-right: 30px;">
<col style="padding-right: 30px;">
<col>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
</body>
</html>
Ответы
Ответ 1
Как обеспечить прозрачную рамку каждой таблицы Ячейка? Я уверен, что это сделает это за вас...
table td {
border:solid 5x transparent;
}
И вы можете применять его только по горизонтали, как это...
table td {
border-left:solid 10px transparent;
}
table td:first-child {
border-left:0;
}
Вот полная рабочая демонстрация того, что, я считаю, вы пытаетесь выполнить...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Layout</title>
<style type="text/css">
table {
border: 1px solid black;
}
table td {
background: yellow;
border-left:solid 10px transparent;
}
table td:first-child {
border-left:0;
}
</style>
</head>
<body>
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
</body>
</html>
Я не верю, что IE6 поддерживает CSS: first-child, поэтому вот обходной путь для этого...
<!–-[if IE 6]>
<style type="text/css">
table td {
border-left: expression(this.previousSibling == null ? '0' : 'solid 5px transparent');
}
</style>
<![endif]-->
Ответ 2
Возможно, вы задумываетесь:
Вы можете использовать два значения: первый - горизонтальная ячейка, вторая - вертикальная.
<table style="border-spacing: 40px 10px;">
Ответ 3
попробуйте использовать col s
Пример
<table>
<col style="padding-right:20px;" />
<col style="padding-right:30px;" />
<col />
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
cols также поддерживают классы:)
надеюсь, что это поможет
Дарко
РЕДАКТ.. Чтобы прояснить, col - это элемент, объявленный в верхней части таблицы, чтобы влиять на целые столбцы. Первый элемент col будет влиять на первый столбец, второй столбец col = second и так далее. Они могут быть сгруппированы в группы, если вы хотите присвоить один и тот же стиль более чем одному столбцу.
EDIT2:. После нескольких исследований выясняется, что единственными надежными стилями, которые вы можете установить в элементе col, являются:
- граница
- фон
- ширина
- видимость
Без полей или отступов. Мудак! Будет ли установка ширины столбцов явным образом решить вашу проблему?
Ответ 4
Вы также можете рассмотреть возможность использования серии разделов с фиксированной шириной, расположенных слева с полями. Это может дать вам немного больше контроля над стилем элемента.
.row div {
margin-right: 10px;
float: left;
width: 50px;
}
<div class="row">
<div>Cell One</div>
<div>Cell Two</div>
<div>Cell Three</div>
</div>
Ответ 5
Ответ Josh не работает, если у вас уже есть границы вокруг ваших ячеек, например я.
Я решил проблему, слегка сдвинув всю таблицу влево, используя "position: relative; left: -10px". Я объединил это с ячейкой на столе.
<div id='sandbox'>
<table cellspacing='10'>
<tr>
<td class='smoothBox'>
...
</td>
<td class='smoothBox'>
...
</td>
</tr>
</table>
</div>
и css:
#sandbox {
float: left;
position: relative; /* move the whole sandbox */
left: -11px; /* slightly to the left */
width: 950px;
margin-top: 0px;
padding: 1px;
text-align: left;
}
#sandbox table {
float: left;
width: 100%;
}
#sandbox td {
width: 300px;
vertical-align: top;
}
Это то, что работает для меня, я надеюсь, что это тоже поможет.
Ответ 6
Вы пытались использовать группировку col?
<table>
<colgroup>
<col class="right-padding" />
<col class="right-padding" />
<col />
</colgroup>
<tbody>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
</tbody>
</table>
Ответ 7
Это работа для меня
border-collapse: separate;
border-spacing: 0px 3px;
Ответ 8
Как просто добавить пустую ячейку, которая работает как спейсер? Вы можете использовать col-tag, как указано выше, чтобы дать пустым ячейкам определенную ширину
<col/>
<col style="width:20px"/>
<col/>
<col style="width:20px"/>
<col/>
<tr>
<td>Data</td>
<td>& nbsp;</td>
<td>Data</td>
<td>& nbsp;</td>
<td>Data</td>
</tr>
Или, если вы хотите сделать больше с ними, просто добавьте к ним классы вместо встроенного стиля...
Ответ 9
Ответ Джоша неплохой, но, на мой взгляд, бесполезно сложный. Когда вы устанавливаете границы таблицы в режим "скрытый" и "свернуть", чтобы "свернуть", границы внешних границ столбцов будут устранены, как требуется.
Рабочий пример:
Стили:
table#my_table {
border-collapse: collapse;
border-style: hidden;
}
table#my_table td {
border-left: 15px solid transparent;
border-right: 15px solid transparent;
}
HTML:
<table id="my_table">
<tr>
<td>A1</td>
<td>A2</td>
<td>A3</td>
</tr>
<tr>
<td>B1</td>
<td>B2</td>
<td>B3</td>
</tr>
</table>
