Блог

Главная - Вопросы по программированию - Хороший способ добавить немного пространства между строками html-таблицы с помощью css? Работает во всех браузерах, включая IE6

Хороший способ добавить немного пространства между строками html-таблицы с помощью css? Работает во всех браузерах, включая IE6

#html #css

#HTML #css

Вопрос:

Какой хороший способ добавить немного пространства между строками html-таблицы с помощью css? Должно работать во всех браузерах, включая IE6. Следует использовать id или class, чтобы это не влияло на каждую таблицу на сайте. Предпочитаю объявлять css на уровне таблицы. Не хотите использовать пустые tr для имитации пустой строки. css не должен влиять ни на какие внутренние таблицы.

Логично, что я пробовал это, но поля не работают с tr:

 .someclass tr
{
  margin-bottom:20px;
}

Ответ №1:

Вы могли бы использовать:

 .someclass td {padding-bottom: 20px;}

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

 .someclass td {border-bottom: 20px solid white;}

Редактировать

Чтобы исключить внутреннюю таблицу, вы могли бы использовать:

 .someclass td td {padding-bottom: 0px;}

Комментарии:

1. Оба имеют нежелательный эффект добавления пространства внутри столбца. Итак, если у меня есть флажок внутри столбца, под флажками есть дополнительное пространство, и флажок не отображается. Внутренние таблицы также наследуют отступы. Как их исключить?

2. У вас есть вложенные таблицы? Не могли бы вы предоставить нам пример jsfiddle для просмотра?

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

Ответ №2:

интервал между границами — правильный путь, но он не удовлетворяет всем вашим требованиям.

Тем не менее, вы могли бы использовать это в сочетании с небольшим определением браузера: если IE < 8, используйте немного javascript, чтобы добавить немного пространства ячеек.

Комментарии:

1. Работает не во всех IE. Я бы выбрал пустые строки вместо использования js browser detection.

2. @Tony, если ты прочитал предоставленную ссылку, решение простое. IE<8 не поддерживает border-spacing и border-spacing переопределяет cellpadding атрибут элемента. Установите cellpadding атрибут в таблице, затем также определите border-spacing в css.

3. @Kevin cellspacing добавляет дополнительное пространство вокруг td с четырех сторон, чего я не хочу. Я только хочу больше места между строками, оставляя все остальное нетронутым. Точно так же, как два div, один над другим, с промежутком между ними. Нет дополнительного пространства в верхней, левой и правой частях. Логически похоже на css, который у меня есть в моем посте.

4. @Tony, прогрессивным улучшением способа справиться с этим было бы исключить интервал для IE<8 ИЛИ принять тот факт, что IE<8 будет иметь пространство по бокам. Если вы хотите что-то, что будет работать во всех браузерах, добавьте пустой tr…

Ответ №3:

Добавьте следующее правило в tr, и оно должно сработать

 float: left

Пример (Откройте его в IE9 вне курса :)):
http://jsfiddle.net/zshmN /

Комментарии:

1. float: left не имеет смысла для строки таблицы.. Если вы закомментируете это, это не будет иметь значения.

Ответ №4:

 <tr><td><br></td></tr>

Приведенное выше создает пробел между 2 строками с <br> тегом

Ответ №5:

Если вы не хотите, чтобы граница была слишком большой / толстой (с border-spacing ), вы могли бы использовать padding на td .

http://jsfiddle.net/zzJ9Z/

Комментарии:

1. border-spacing не увеличивает border-width . Это добавляет пространство между границами td элементов (но вам нужно использовать значение по умолчанию border-collapse of separate ). Таким образом, background что было бы видно, это background набор в tr или другом родительском элементе.

2. Как запретить innertables наследовать свойства из родительской таблицы? Смотрите внутреннюю таблицу по адресу jsfiddle.net/zzJ9Z/3