Как уменьшить отступы в таблице

Как уменьшить отступы в таблице

Internet Explorer Chrome Opera Safari Firefox Android iOS
8.0+ 1.0+ 4.0+ 1.0+ 1.0+ 1.0+ 1.0+

Краткая информация

Значение по умолчанию
Наследуется Да
Применяется К таблицам
Ссылка на спецификацию http://www.w3.org/TR/CSS21/tables.html#propdef-border-spacing

Версии CSS

CSS 1 CSS 2 CSS 2.1 CSS 3

Описание

Задает расстояние между границами ячеек в таблице. border-spacing не работает в случае, когда для таблицы установлено свойство border-collapse со значением collapse .

Синтаксис

border-spacing: значение1 [значение2]

Значения

Одно значение устанавливает одновременно расстояние по вертикали и горизонтали между границами ячеек. Если значений два, то первое определяет горизонтальное расстояние, а второе — вертикальное.

HTML5 CSS 2.1 IE Cr Op Sa Fx

Результат данного примера показан на рис. 1.

Есть следующая конструкция

Таким образом мы получаем резиновую таблицу с фиксированной шириной на десктопе и 100% на смартфоне.

Проблема: в Safari пустые `th`-ячейки имеют ширину в 1px
Задача: убрать этот отступ не используя медиазапросы

  • Вопрос задан более года назад
  • 358 просмотров

Если для письма, то как правило нужно прописать в стилях либо для конкретных тегов

а для тегов таблицы прописать

Я верстаю письма с 2011 года и все эти нюансы мне знакомы. Пиксель появляется только на webkit движке. Т.е. только в Safari и Apple Mail клиенте.

В хроме, фаерфоксе, ишаке и во всех других почтовиках проблемы нет. Т.е. по факту пиксель появляется из-за неразрывного пробела. Вот его-то и надо победить. Как — пока не понимаю.

Мы уже выяснили с вами, что у HTML-таблиц есть рамки, хотя по умолчанию их браузеры и не показывают. Но это еще не все, у каждой ячейки таблицы тоже есть рамка, которая называется граница ячейки. Но и это еще не все, используя специальные атрибуты тега

Читайте также:  Два мира 2 усыпальница первосвященника уни
можно изменять расстояния между ячейками и от ячеек до рамки таблицы, а также внутренние отступы от границ ячеек до их содержимого.

Рамка HTML-таблицы, границы ячеек, расстояния между ними и внутренние отступы.

Итак, для создания рамки HTML-таблицы и границ ее ячеек используется всего один атрибут тега

— border . Значением атрибута являются целые неотрицательные числа (ноль по умолчанию), которые означают размер в пикселях. Но, внимание, размер изменяется только у рамки таблицы, у границ ячеек он всегда неизменен.

Для изменения расстояния между ячейками (их границами) и от ячеек до рамки таблицы в теге

применяется атрибут cellspacing . Его значениями тоже могут быть только числа, отмеряющие расстояния в пикселях.

Чтобы установить внутренние отступы от границ ячеек до их содержимого необходимо в теге

использовать атрибут cellpadding . И его значения это числа, означающие пиксельные размеры.

Обратите внимание, что браузеры по умолчанию устанавливают небольшие (в два пикселя) значения cellspacing и cellpadding , поэтому чтобы убрать расстояния вовсе — установите у атрибутов значения ноль (0).

Пример границ, рамок и отступов HTML-таблиц

Результат в браузере

Таблица с измененными отступами и расстояниями:

Ячейка 1.1 Ячейка 1.2 Ячейка 1.3
Ячейка 2.1 Ячейка 2.2 Ячейка 2.3
Ячейка 3.1 Ячейка 3.2 Ячейка 3.3

Таблица только с установленными рамкой и границами ячеек:

Ячейка 1.1 Ячейка 1.2 Ячейка 1.3
Ячейка 2.1 Ячейка 2.2 Ячейка 2.3
Ячейка 3.1 Ячейка 3.2 Ячейка 3.3

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

Согласно синтаксиса HTML, браузеры прибавляют значения cellspacing и cellpadding к размерам таблицы и ее ячеек. Например, если вы установите ширину ячейки в 100 пикселей и cellpadding= "10" — браузеры прибавят к ширине 20 пикселей (по 10 слева и справа) и она станет равна 120 пикселей. В общем, по ходу дела разберетесь.

Читайте также:  Как зарегистрировать новый планшет

Отступление от темы или как убрать отступы по краям страницы

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

В свое время у тега существовало четыре атрибута, которые устанавливали размер этих отступов для каждой стороны страницы: topmargin (сверху), rightmargin (справа), bottommargin (снизу) и leftmargin (слева). Сейчас эти атрибуты устарели, поэтому будем применять стили (CSS). Итак, изменить расстояния отступов по краям страницы можно несколькими способами, я покажу вам два, а о третьем узнаете, если решите изучать CSS.

Способ первый. B теге указать атрибут style со следующими значениями:

Ссылка на основную публикацию
Как узнать характеристики ноута
Доброго дня. Я думаю, что многие при работе за компьютером или ноутбуком сталкивались с безобидным и простым вопросом: «как узнать...
Как удалиться из приложения фотострана
Социальная сеть «Фотострана» многим не нравится своей навязчивостью, что также проявляется, когда пользователь желает удалить свой аккаунт. В самой сети...
Как удалиться с сайта навечно
На сегодняшний день существует множество сайтов знакомств, и зачастую пользователи регистрируются на нескольких одновременно в поисках интересного общения, новых друзей...
Как узнать характеристики сетевой карты
Здравствуйте, друзья! Тема сегодня общая – я расскажу, как узнать, какая сетевая карта установлена в ваш компьютер. Это понадобится, если...
Adblock detector