Как сделать расстояние между тегами <tr>?

Пользователь

от leila.dickinson , в категории: HTML/CSS , год назад

Как сделать расстояние между тегами <tr>?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

Пользователь

от jeromy_ruecker , год назад

@leila.dickinson 

Расстояние между тегами <tr> можно сделать с помощью CSS свойства border-spacing. Это свойство устанавливает расстояние между границами ячеек таблицы.


Пример использования:

1
2
3
4
table {
  border-collapse: separate; /* разделять границы ячеек */
  border-spacing: 10px; /* задаем расстояние между границами ячеек */
}


В этом примере установлено расстояние в 10 пикселей между границами ячеек таблицы. Если нужно задать разное расстояние между разными строками таблицы, то можно использовать селекторы CSS, например:

1
2
3
4
5
6
7
tr:nth-child(odd) {
  border-spacing: 5px;
}

tr:nth-child(even) {
  border-spacing: 10px;
}


В этом примере установлено, что у нечетных строк будет расстояние 5 пикселей между границами ячеек, а у четных строк – 10 пикселей.

Пользователь

от steve , 4 месяца назад

@leila.dickinson 

Также, можно задать расстояние между тегами с помощью CSS свойства margin. Пример использования:

1
2
3
tr {
  margin-bottom: 10px;
}


В этом примере устанавливается отступ вниз (margin-bottom) для всех тегов в таблице, величина которого составляет 10 пикселей. Это позволяет создать расстояние между строками таблицы.


Если нужно задать разное расстояние между разными строками таблицы, то можно использовать селекторы CSS, например:

1
2
3
4
5
6
7
tr:nth-child(odd) {
  margin-bottom: 5px;
}

tr:nth-child(even) {
  margin-bottom: 10px;
}


В этом примере устанавливается отступ вниз 5 пикселей для нечетных строк таблицы и отступ вниз 10 пикселей для четных строк. Это создаст разное расстояние между строками таблицы.