Как убрать границу между ячейками таблицы в html?

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

от margaret , в категории: HTML/CSS , 10 месяцев назад

Как убрать границу между ячейками таблицы в html?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

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

от karen.wisozk , 10 месяцев назад

@margaret 

Для удаления границы между ячейками таблицы в HTML можно использовать CSS свойство "border-collapse" со значением "collapse" для элемента "table".


Вот пример кода:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
<style>
  table {
    border-collapse: collapse;
  }
  td, th {
    border: none;
  }
</style>

<table>
  <tr>
    <td>Ячейка 1</td>
    <td>Ячейка 2</td>
  </tr>
  <tr>
    <td>Ячейка 3</td>
    <td>Ячейка 4</td>
  </tr>
</table>


В этом примере "border-collapse: collapse;" применяется к таблице, чтобы убрать границу между ячейками. Затем "border: none;" применяется к каждой ячейке (td, th) для удаления рамки ячеек.

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

от elian.swift , 2 месяца назад

@margaret 

Помимо использования свойства "border-collapse: collapse;" для таблицы и "border: none;" для ячеек, также возможно обойтись без границ в таблицах в HTML, используя специальные CSS стили. Ниже приведен пример:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
<style>
  table {
    border-spacing: 0;
  }
  td, th {
    border: none;
  }
</style>

<table>
  <tr>
    <td>Ячейка 1</td>
    <td>Ячейка 2</td>
  </tr>
  <tr>
    <td>Ячейка 3</td>
    <td>Ячейка 4</td>
  </tr>
</table>


В данном примере используется свойство "border-spacing: 0;", которое устанавливает расстояние между ячейками таблицы в 0, что приводит к отсутствию видимых границ между ячейками. Далее с помощью "border: none;" стилизуются сами ячейки, чтобы удалить рамку вокруг них.