Как убрать отступы между ячейками и границами таблицы, при этом оставить отступ между ячейками?
border-collapse и border-spacing управляют отступами вокруг каждой ячейки, и не делают различий для крайних ячеек. margin к ячейкам вообще не применяется.
Возможно вас устроит вариант с костылями при помощи padding.
table < border-collapse: collapse; /* убираем отступы совсем */ >td:not(:last-child) < padding: 0 10px 0 0; /* для всех ячеек кроме последней добавяем паддинг справа */ >Ответ написан более трёх лет назад
Руслан Галиев @ruslanredo Автор вопроса
Спасибо, попробую чуть позже. Пока что сработал вариант с оборачиванием в контейнер с отрицательными боковыми марджинами.
Полностью убрать расстояния между ячейками
Первое свойство — расстояние между ячейками.
Второе — предотвращает задвоение рамок.
table
Отслеживать
ответ дан 22 апр 2016 в 15:31
Утка Учится Укрываться Утка Учится Укрываться
7,137 3 3 золотых знака 29 29 серебряных знаков 55 55 бронзовых знаков
Ну да все работает, спасибо, у самого возникал такой вопрос как то jsfiddle.net/72eg3o9x
22 апр 2016 в 15:57
Почти как у остальных, но border-spacing не нужен при border-collapse: collapse :
table < border-collapse: collapse; >td
foo bar baz
Отслеживать
ответ дан 3 янв 2017 в 21:16
122k 24 24 золотых знака 124 124 серебряных знака 299 299 бронзовых знаков
foo bar baz
Отслеживать
ответ дан 22 апр 2016 в 15:33
user176262 user176262
Этот метод стал deprecated как минимум лет пять назад
22 апр 2016 в 15:35
@ru_volt «А я до сих пор поезда взрываю.»
– user176262
22 апр 2016 в 15:38
Попробуйте изменить отступы и толщину границы:
margin: 0px; border-width: 0px; Также и для таблицы.
Отслеживать
ответ дан 22 апр 2016 в 15:21
Vanyamba Electronics Vanyamba Electronics
2,693 13 13 золотых знаков 18 18 серебряных знаков 26 26 бронзовых знаков
не помогает: jsfiddle.net/ntLzdf5m
22 апр 2016 в 15:29
Полный ответ на ваш вопрос выглядит так:
// Remove default spacing table < border-spacing: 0; border-collapse: collapse; >// Remove default padding td, th
Отслеживать
ответ дан 3 янв 2017 в 12:49
MobiDevices MobiDevices
7,291 5 5 золотых знаков 27 27 серебряных знаков 69 69 бронзовых знаков
text-align: center; — откуда взялся?
3 янв 2017 в 15:22
@VenZell, угадай с одной попытки. Строка 227.
3 янв 2017 в 21:13
- html
- css
-
Важное на Мете
Похожие
Подписаться на ленту
Лента вопроса
Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.
Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.11.15.1019
Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.
Убрать лишние отступы внутри ячеек таблицы
Здравствуйте! Есть сайт на wp, нужно сделать так, чтобы отступ в таблице, обычной, был меньше, как такое реализовать? В css эти параметра правятся да?
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
Ответы с готовыми решениями:
Как убрать лишние отступы
Здравствуйте, подскажите пожалуйста почему как убрать лишние отступы. Скриншот и архив прилагается.
Убрать лишние отступы в блоке новости
Как исправить проблему с отступами. Не могу понять почему нижняя панелька отступает. Тоесть понять.
Как убрать лишние отступы вверху в браузере Mozilla FireFox?
Здравствуйте уважаемые форумчане, подскажите пожалуйста решение проблемы, имеется следующий код.
Убрать маркеры и добавить отступы внутри ненумерованного списка
Сам по себе <ul>. отодвигается на некоторое расстояние. Нужны отступы относительно отступов.
Учимся применять cellpadding и cellspacing в CSS
В HTML атрибуты cellpadding и cellspacing можно установить следующим образом:
Если нужно полностью убрать расстояние между ячейками ( установить cellspacing=»0″ ), не забудьте задать свойство border-collapse: collapse . Но как реализовать cellspacing в CSS ?
Рабочий CSS-эквивалент cellspacing – это border-spacing , но при этом он не работает в браузере Internet Explorer . Можно установить border-collapse: collapse, что также приведет к нулевым промежуткам между ячейками. Но единственным полностью кроссбраузерным решением остается применение атрибута cellspacing :
table < border-collapse: collapse; /* эквивалент 'cellspacing' */ >table td, table th < padding: 0; /* эквивалент 'cellpadding' */ >
Также можно просто использовать cellpadding=»0″ cellspacing=»0″ , так как эти атрибуты еще не считаются устаревшими.
Основы
Чтобы контролировать промежутки между ячейками с помощью CSS , можно использовать отступы ( padding ), выставленные для ячеек таблицы:
Что касается эквивалентов CSS table cellspacing , то можно использовать свойство border-spacing , примененное к таблице. Например:
table
Данное свойство также позволит получить горизонтальные и вертикальные промежутки. То есть, реализовать то, что невозможно при помощи атрибута cellspacing .
Проблемы с IE ниже 7 версии
Эти методы будут работать практически во всех современных браузерах, за исключением Internet Explorer 7 . Все они поддерживают свойство border-collapse , которое объединяет границы смежных ячеек в таблице. Если попробовать убрать промежутки между ячейками ( cellspacing=»0″ ), то у border-collapse:collapse будет тот же эффект: отсутствие расстояния между ячейками. Стоит обратить внимание, что поддерживается этот вариант « криво », так как существующий HTML-атрибут cellspacing в CSS не переписывается.
Если вы не работаете с Internet Explorer 5-7 , используйте border-spacing . Если же вам не повезло, то используйте cellspacing:0 или border-collapse:collapse :
table
Если же вам не нужно нулевое значение cellspacing , то попробуйте то, что сработало у меня. Но имейте в виду, что этот вариант был протестирован только в Firefox :
table
Этот хак cellpadding cellspacing CSS работает в IE 6 и выше, Google Chrome , Firefox и Opera :
table < border-collapse: separate; border-spacing: 10px; /* cellspacing */ *border-collapse: expression('separate', cellSpacing = '10px'); >table td, table th < padding: 10px; /* cellpadding */ >
Объявление * предназначено для Internet Explorer 6 и 7 , а также всех остальных браузеров, которые могут проигнорировать это свойство. expression(‘separate’, cellSpacing = ’10px’) возвращает значение ‘ separate ‘, но выполняются оба состояния, так как в JavaScript можно передать больше аргументов, и все они будут использованы.
У этой проблемы есть простое решение:
table < border: 1px solid #000000; border-collapse: collapse; border-spacing: 0px; >table td
Установки по умолчанию
Стандартное поведение браузера эквивалентно следующему:
table td
Cellpadding
Позволяет задать расстояние между содержимым ячеек:
table td
Cellspacing
cellspacing CSS отвечает за расстояние между самими ячейками:
table td
Комбинация свойств
table td
Комбинация свойств (дополнительно)
table td
Примечание: если установлен атрибут border-spacing , то это указывает на то, что border collapse CSS имеет значение separate .
Можете попробовать в действии !
Оберните содержимое ячейки в div , и сможете сделать что угодно, но тогда придется оборачивать каждую ячейку в колонке. Например, чтобы получить более широкие левое и правое поля, нужно использовать следующий CSS-код :
div.cellwidener < margin:0px 15px 0px 15px; >td.tight
А также следующий HTML-код :
My content |
Здесь можно опробовать код в действии.
Гораздо проще создать с нужными фонами, а затем поверх этого элемента позиционировать таблицы с использованием position: absolute и background: transparent . Данный метод работает в Chrome , IE ( 6 и выше ), а также Mozilla ( 2 и выше ).
После border-collapse я использовал атрибут !important , чтобы получилось border-collapse: collapse !important . В IE 7 этот вариант отлично работал. Он переписывал исходный атрибут cellspacing .
Попробуйте следующий метод реализации CSS table cellspacing :
table < border-collapse: separate; border-spacing: 10px; >table td, table th
Или немного по-другому:
table < border-collapse: collapse; >table td, table th
Для таблиц можно использовать border-collapse: collapse , а для th или td — указать padding :
table th,td < padding: 8px 2px; >table
selector< padding:0 0 10px 0; // Верхняя, левая, нижняя, правая >
Для содержимого таблицы можно применять CSS-отступы :
table
Это может вызвать проблемы в старых версиях Internet Explorer из-за различий в реализации блочной модели.
Ниже приведен код для сброса всех стилей cellpadding cellspacing CSS . Он находится у меня в файле reset.css :
table < border:0; /* Замена границ */ border-spacing: 0px; /* Замена cellspacing */ border-collapse: collapse; /* Патч для Internet Explorer 6 и Internet Explorer 7 */ >table td< padding: 0px;/* Замена cellpadding*/ >
Cellpadding используется для создания промежутков между содержимым ячеек и их границами:
Атрибут cellspacing создает пространство вокруг каждой ячейки в таблице. Чтобы добиться эффекта cellspacing в CSS , используйте свойство border-spacing :
table,th,td
Если свойство margin не сработало, попробуйте установить свойство display у элемента tr на block , и тогда оно точно заработает.
Стили добавляются в разметку таблиц только для того, чтобы не использовать CSS . Это может вызвать сложности, если на странице много таблиц:
| Some Text |
В HTML5 свойства cellspacing и cellpadding для таблиц считаются устаревшими. Теперь, чтобы получить эффект cellspacing , нужно использовать border-spacing , а cellpadding компенсировать border-collapse .
И всегда старайтесь задавать значения cellpadding cellspacing CSS в стилевом файле:
| Col 1 | Col 2 | Col 3 |
|---|---|---|
| 1 | 2 | 3 |
cellpadding можно реализовать с помощью отступов в CSS , в то время как cellspacing можно компенсировать свойством border-spacing , примененным к таблице:
table < border-spacing:10px; >td
table td
В HTML-таблице cellpadding cellspacing CSS можно установить следующим образом: чтобы получить промежутки между контентом ячеек, используйте отступы для td/th :
/******Call-Padding**********/ table < border-collapse: collapse; >td < border: 1px solid red; padding: 10px; >
| Head1 | Head2 | Head3 | Head4 |
|---|---|---|---|
| 11 | 12 | 13 | 14 |
| 21 | 22 | 23 | 24 |
| 31 | 32 | 33 | 34 |
| 41 | 42 | 43 | 44 |
table < border-collapse: collapse; >td
Для получения cellspacing CSS используйте свойство border-spacing для table :
/********* Cell-Spacing ********/ table < border-spacing: 10px; border-collapse: separate; >td < border: 1px solid red; >
| Head1 | Head2 | Head3 | Head4 |
|---|---|---|---|
| 11 | 12 | 13 | 14 |
| 21 | 22 | 23 | 24 |
| 31 | 32 | 33 | 34 |
| 41 | 42 | 43 | 44 |
/********* Cell-Spacing ********/ table < border-spacing: 10px; border-collapse: separate; >td