Как задать расстояние между строками таблицы в css?

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

от alisa.bahringer , в категории: HTML/CSS , 2 года назад

Как задать расстояние между строками таблицы в css?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

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

от madelyn_hintz , 2 года назад

@alisa.bahringer  Задать расстояние между строками таблицы в css можно с помощью border-spacing :


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <style>
      table,
      th,
      td {
        border: 2px solid;
        border-spacing: 10px;
      }
    </style>
  </head>
  <body>
    <table>
      <tr>
        <th>Животные</th>
        <th>Имя</th>
        <th>Возраст</th>
      </tr>
      <tr>
        <td>Кошка</td>
        <td>Мурка</td>
        <td>3</td>
      </tr>
      <tr>
        <td>Собака</td>
        <td>Жучка</td>
        <td>5</td>
      </tr>
    </table>
  </body>
</html>

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

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

@alisa.bahringer 

Вы можете задать расстояние между строками таблицы с помощью свойства CSS line-height.


Для этого нужно выбрать элемент таблицы (table) и задать свойство line-height с желаемым значением расстояния между строками. Например:

1
2
3
table {
  line-height: 1.5;
}


Это установит расстояние между строками таблицы в 1.5 раза больше высоты строки текста.


Вы также можете задать отдельное значение line-height для заголовков (th) и ячеек (td) таблицы, если хотите, чтобы они имели разные интервалы. Например:

1
2
3
4
5
6
7
th {
  line-height: 2;
}

td {
  line-height: 1.5;
}


Это установит расстояние между строками заголовков таблицы в 2 раза больше высоты строки текста, а расстояние между строками ячеек таблицы - в 1.5 раза больше.