Отступы в таблице в css: Отступы внутри ячеек — Знакомство с таблицами — HTML Academy

Leave a Comment / Css / By /

html — Полностью убрать расстояния между ячейками

Задать вопрос

Вопрос задан

Изменён 6 лет 3 месяца назад

Просмотрен 18k раз

Существует некоторая таблица:

td {
  padding: 0px
}
<table>
  <tr>
    <td>
      foo
    </td>
    <td>
      bar
    </td>
    <td>
      baz
    </td>
  </tr>
</table>

Необходимо полностью убрать отступы между ячейками в таблице. У изначально стоит padding: 1px. Это я убрал, но все равно между ячейками появляются отступы: у <tr> ширина — 65px (все тестил в FireFox), а суммарно у всех

<td> — 61px. Что нужно сделать, чтобы не было вообще никаких отступов?

  • html
  • css

2

Первое свойство — расстояние между ячейками.
Второе — предотвращает задвоение рамок.

table{
  border-spacing: 0px;
  border-collapse: collapse;
}

1

Почти как у остальных, но border-spacing не нужен при border-collapse: collapse:

table {
  border-collapse: collapse;
}

td {
  padding: 0px
}
<table>
  <tr>
    <td>
      foo
    </td>
    <td>
      bar
    </td>
    <td>
      baz
    </td>
  </tr>
</table>
 <table cellspacing="0" cellpadding="0">
  <tr>
    <td>
      foo
    </td>
    <td>
      bar
    </td>
    <td>
      baz
    </td>
  </tr>
</table>

2

Попробуйте изменить отступы и толщину границы:

margin: 0px;
border-width: 0px;

Также и для таблицы.

1

Полный ответ на ваш вопрос выглядит так:

// Remove default spacing
table {
    border-spacing: 0;
    border-collapse: collapse;
}
// Remove default padding
td, th {
    padding: 0;
    text-align: center;
}

2

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

html — Как сделать расстояния между ячейками таблицы, чтобы при этом по краям этой таблицы отступов от ячеек не было?

Задать вопрос

Вопрос задан

Изменён 4 года 9 месяцев назад

Просмотрен 3k раз

Если задавать таблице border-spacing: 5px;, например, то отступы появляются не только внутри вокруг ячеек, но и по краям также появляются отступы. Как желательно без костылей сделать, чтобы по краям (отмечены красными стрелками) не было отступов?

Нужно вот-так:

  • html
  • css
  • таблицы

Как вариант — отрицательные поля, равные значению border-spacing.

table { 
    border-spacing: 10px;
    border-collapse: separate;
    margin: -10px;
}

td {
  padding: 1em;
  border: 1px solid;
}

body {
  margin: 0;
}
<table>
  <tr>
    <td>1</td>
    <td>2</td>
  </tr>
  <tr>
    <td>3</td>
    <td>4</td>
  </tr>
</table>

1

https://jsfiddle.net/bc3zutny/19/

   <!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>border-spacing</title>
  <style>
   table {
    border: 4px double #333; /* Рамка вокруг таблицы */ 
    border-collapse: separate; /* Способ отображения границы */ 
    width: 100%; /* Ширина таблицы */ 
    /*border-spacing: 50px 45px;  Расстояние между ячейками */ 
   }
   td {
    padding: 5px; /* Поля вокруг текста */ 
    border: 1px solid #a52a2a; /* Граница вокруг ячеек */ 
   }
  </style>
 </head>
 <body>
  <table>
   <tr>
    <td>111111111</td>
    <td></td>
    <td>3333333</td>
   </tr>
   <tr>
    <td></td>
    <td></td>
    <td></td>
   </tr>
   <tr>
    <td>111111111</td>
    <td></td>
    <td>3333333</td>
   </tr>
  </table>
 </body>
</html>

4

Это не таблица, но как вариант можно использовать.

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 20px;
  border: 1px solid lightgreen;
}

.grid__cell {
  border: 1px solid lightcoral;
}
<div>
  <div>1111111111111111</div>
  <div>2222222222222222</div>
  <div>3333333333333333</div>
  <div>4444444444444444</div>
</div>

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Таблица HTML Colspan и Rowspan

❮ Предыдущая Далее ❯

В таблицах HTML могут быть ячейки, занимающие несколько строк и/или столбцов.

АПРЕЛЬ    
   
   
     
     
2022
     
ФИЕСТА  
 
     

Таблица HTML — Colspan

Чтобы создать диапазон ячеек по нескольким столбцам, используйте атрибут colspan :

Пример


 
   
 
 

   

 
 
   

   
 
Имя< /th>
Возраст
Джилл Смит 43
Ева Jackson 57

Попробуйте сами »

Примечание: Значение атрибута colspan представляет число столбцов для охвата.

Таблица HTML — Rowspan

Чтобы создать диапазон ячеек, состоящий из нескольких строк, используйте атрибут rowspan :

Пример


 
   

 
 
   

 
 


Name Джилл
Телефон 555-1234
555-8745

Попробуйте сами »

Примечание: Значение атрибута rowspan представляет количество строки для охвата.

HTML-упражнения

Проверьте себя с помощью упражнений

Упражнение:

Используйте правильный HTML-атрибут, чтобы первый элемент TH занимал два столбца.

<таблица>
  
    Имя
    Возраст
  
  
    Джилл
    Смит
    50
  
  
    Ева
    Джексон
    94
  

Начать упражнение

❮ Предыдущий Следующий ❯


ВЫБОР ЦВЕТА

Лучшие учебники
Учебник по HTML
Учебное пособие по CSS
Учебное пособие по JavaScript
Учебное пособие
Учебное пособие по SQL
Учебное пособие по Python
Учебное пособие по W3. CSS
Учебное пособие по Bootstrap
Учебное пособие по PHP
Учебное пособие по Java
Учебное пособие по C++
Учебное пособие по jQuery

90 002
Лучшие ссылки
Справочник по HTML
Справочник по CSS
Справочник по JavaScript
Справочник по SQL
Справочник по Python
Справочник по W3.CSS
Справочник по Bootstrap
Справочник по PHP
Цвета HTML
Справочник по Java
Справочник по Angular
Справочник по jQuery

Основные примеры
Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

ФОРУМ | О

W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания. Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования, куки-файлы и политика конфиденциальности.

Copyright 1999-2023 Refsnes Data. Все права защищены.
W3Schools использует W3.CSS.

html — Заполнение таблицы не работает

спросил

Изменено 3 года, 8 месяцев назад

Просмотрено 80 тысяч раз

У меня есть таблица, которая находится в родительском div и заполнена основным текстом и другим содержимым. У меня есть следующий CSS, который не работает:

 таблица {ширина:100%; отступ: 0 50 пикселей 0 50 пикселей;}

Когда я использую поля вместо отступов, это работает, однако с шириной: 100% использование полей выталкивает все это из родительского div. Думаю, я мог бы уменьшить ширину или указать точное количество пикселей, но остальная часть сайта масштабируется с размером экрана, и я бы хотел, чтобы это тоже работало.

  • html
  • css
  • поля
  • заполнение
  • css-таблицы

2

Есть некоторые специальные свойства, связанные с таблицами. Тот, который вы ищете, это border-spacing .

 таблица {
    ширина: 100%;
    граница-коллапс: раздельная;
    интервал между границами: 0 50px;
}

Пример: http://jsfiddle.net/feeela/fPuQ6/

ОБНОВЛЕНИЕ: Поиграв со своей собственной скрипкой, я должен признать, что ошибался, говоря, что «у таблицы нет отступов» . Отступы в таблице работают нормально — по крайней мере, при просмотре в Chrome и Opera (12). Следующий фрагмент должен вам понравиться:

 таблица {
    ширина: 100%;
    отступ: 0 50 пикселей 0 50 пикселей;
}

См. обновленную версию скрипки: http://jsfiddle.net/feeela/fPuQ6/3/

Тем не менее мне все еще интересно, почему отступы не добавляются к ширине, как для элемента с дисплеем : блокировать; .

См. также:

  • https://developer.mozilla.org/en-US/docs/Web/CSS/border-spacing
  • https://developer.mozilla.org/en-US/docs/Web/CSS/border-collapse
  • https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started/Tables

Вот почему;

Из MDN, чтобы использовать отступы в таблицах, вам нужно иметь border-collapse: отдельный; , чтобы можно было использовать border-spacing , потому что border-spacing является фактором при расчете расстояния между внешним краем таблицы и краем внешних ячеек (см. цитаты из MDN ниже). После этого теперь вы можете присвоить padding значение. Вы также можете установить border-spacing: 0px; , чтобы отменить добавление border-spacing для заполнения.

Свойство CSS border-spacing задает расстояние между границами соседних ячеек. Это свойство применяется только в том случае, если border-collapse является отдельным.

Значение border-spacing также используется вдоль внешнего края таблицы, где расстояние между границей таблицы и ячейками в первом/последнем столбце или строке представляет собой сумму соответствующих (горизонтальных или вертикальных) border-spacing и соответствующий (верхний, правый, нижний или левый) отступ в таблице.

Предыдущий ответ показывает, что css может установить border-[direction] для направления ea отдельно. Но гораздо более простое решение только для css, которое копирует старую таблицу cellpadding="7" border="1" , может быть следующим. В CSS:

 таблица {
  граница коллапса: коллапс;
  ширина: 100%;
}
тд {
  отступ: 7px;
  граница: сплошная 1px;
}

Показано в этой скрипте: http://jsfiddle.net/b5NW5/77

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

При использовании CSS: