Border collapse css не работает

Border-collapse не работает

Здравствуйте! В стилях, для таблицы указан коллапс, но сколлапсировались только

, а строки отказались, в чем может быть причина?

Помощь в написании контрольных, курсовых и дипломных работ здесь.

Зачем в border-collapse нужно
separate? оно не по умолчанию разве?

Как сделать border-collapse для div блоков?
Здравствуйте. Имею такую простую конструкци.

Верстка таблицы с отступами между строк, но без border-collapse: separate возможно?
Приветствую! Недавно занимаюсь версткой, что то знаю что то нет, так что не серчайте. В общем.

Некорректно работает Bootstrap JS Collapse
При уменьшении размера web-страницы сайта появляется кнопка, щелкнув на которую разворачивается.

У Вас в конце строк

вместо

.
Впрочем, у меня в Файерфоксе всё и так нормально.

Не работает navbar collapse и dropdown menu в Google Chrome
В Microsoft Edge все прекрасно работает . Использую Bootstrap версии 4.3.1

Border не работает
CSS подключила, задала border цвет, но не отображается, я понимаю, что где-то маленькая ошибка, но.

Border не работает
Возникла проблема,свойство бордер не работает :(, подскажите что делаю не так. CSS .

Не работает BORDER в таблице
Всем добрый день! Никак не могу решить следующую задачу. Есть таблица, в ней должна быть рамка и.

Источник

Почему граница не видна с «position: sticky», когда существует цвет фона?

position: ‘sticky’ добавлен в Chrome 56, но это граница невидима при определенных обстоятельствах.

Рассмотрим следующий пример:

В Chrome 56.0.2924.76 видна только последняя граница

, и это только в том случае, если задано background-color .

Это ошибка в Chrome?

12 ответов

Похоже, принудительное перекомпонование частично поможет

background-clip также эффективен и безвреден:

Я столкнулся с той же проблемой. Мой обходной путь — использовать псевдоэлемент :after для эмуляции нижней границы.

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

Другой вариант — обернуть ваш контент в элемент и наложить на него границу:

Однако я обнаружил, что наложение границы на th работает без border-collapse: collapse на столе, поэтому я пошел на это.

Я исправил эту проблему с помощью псевдоэлемента вместо границы. Не уверен, почему это происходит в первую очередь, хотя.

Используйте ::after псевдо-селектор для эмуляции правой границы

Попробуйте это вместо этого:

Следующий пример в настоящее время хорошо работает в Chrome (65) и Firefox (59).

Код SCSS лучше иллюстрирует взаимосвязь между значениями. Вы можете установить желаемые значения путем изменения переменных.

HTML и скомпилированный CSS:

Я использую только горизонтальные границы на своей странице, так что это может потребоваться адаптировать к вашему конкретному случаю. Используя полупрозрачный цвет фона для ячеек таблицы, я обнаружил, что именно нижний конец фона перекрывает горизонтальную границу. Я думаю, что это будет то же самое с правым концом для вертикальной границы. Чтобы избежать наложения границ, я установил линейный градиент, который заполняет все, но не оставляет последний пиксель. К сожалению, это работает только в Firefox и Chrome, но не в Edge.

Edge рисует линейный градиент, но от белого вверху до прозрачного внизу, игнорируя резкие изменения на стопе при 100% — 1px.

Источник

Победа над неочевидным. Схлопывание внешних отступов

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

Наверное, каждый сталкивался со свойством border-collapse для таблиц. Известно, что данное свойство со значением border-collapse:collapse удаляет одну из границ для соседних ячеек таблицы, предотвращая дублирование их границ. Схоже работает и особенность блочной модели, называемая схлопыванием внешних отступов (англ. — Collapsing Margin). Схлопывание внешних отступов — особенность блочной модели CSS, которая заключается в наложении вертикальных внешних отступов двух или более блочных элементов (которые могут быть или не быть соседями) для формирования одиночного внешнего отступа. Отступ, сформировавшийся в результате данного объединения, называется схлопнувшимся отступом. Заметьте, что данная особенность применима только к вертикальным отступам элемента, т.е. к margin-top и margin-bottom.

Для упрощения, представляйте схлопывание следующим образом: когда внешние вертикальные отступы блочных элементов соприкасаются, то остается отступ, значение которого равняется значению большего из них, при этом значение отступа элемента с меньшей границей равно нулю. На рисунке ниже размер одной клетки фонового рисунка равен 20 пикселей; как видим, отступ между элементами равен 40 пикселей, хотя на первый взгляд, глядя на код, человеку, не знакомому с принципами схлопывания, может показаться, что блоки размещены неправильно, так как их отступы не плюсуются:

В случае, если одна с величин имеет минусовое значение, то финальное значение схлопнувшегося отступа формируется путем суммирования исходных значений блочных элементов. В случае, если обе величины отрицательные, то используется большее отрицательное значение (меньшее с арифметической точки зрения). Например, если бы block1 имел значение margin-bottom:-60px, а блок block2 margin-top:50px, то финальное значение отступа между элементами было бы минус 10 пикселей.

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

• с «плавающими» блоками, которые используют свойство float;
• с корневыми элементами(html, body);
• с абсолютно позиционируемыми элементами, имеющих свойство и значение position:absolute;
• в строчных элементах.

Существуют также специфические исключения, применяемые в зависимости от того, в каком иерархическом взаимодействии находятся блоки (об этом ниже):

• Если элементы имеют значение свойства overflow, отличимое от visible, то в таких элементах не схлопываются отступы с отступами их наследников.
• Элементы со свойством cleared не схлопываются верхними отступами с нижними отступами их родителей.

Теория может быть сложна для понимания, поэтому перейдем к примерам. Рассмотрим классические случаи, существующие в наследовании: когда блоки имеют связь потомок-потомок (sibling-sibling), элементы соседствуют друг с другом и имеют общего родителя; а также когда блоки имеют связь родитель-потомок (parent-child) — один элемент вложенный в другой. В обоих случаях схлопывание успешно применяется, но имеет несколько нюансов, о которых стоит поговорить.

Соседние элементы и схлопывание

Обычно, исключая применения дополнительных свойств, внешние отступы любых соседних не корневых блочных элементов схлопываются, пример схлопывания соседних элементов приведен выше.

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

Как видим, здесь нужно добавлять родительскому элементу нижнее внутреннее поле для того, что бы выровнять все элементы. Стоит ли ломать ноги, что бы подставлять костыли — дело вкуса, но я бы не советовал.

Схлопывание отступов элементов, связанных родительской связью

В данном случае схлопывание работает немного запутаннее и сложнее, чем в примерах выше. Для начала нужно знать, что отсупы блоков схлопываются соответствующими полями. Это значит, что верхнее поле родителя схлопнется с верхним полем своего потомка. Для рассмотрения данной ситуации представим, что имеется три блока: внешний блок-родитель, блок-родитель и дочерний блок. Для того, чтобы сработало схлопывание, нужно что бы блок-родитель не имел ни полей, ни границ (их значения были нулевые). Таким образом, внешние поля этих элементов соприкасаются. Заметьте, что нулевые значения внутренних полей и границ для родителей — обязательное условие срабатывания схлопывания.

Напомню, что размер одной клетки равно 20 пикселей, поэтому без схлопывания отступ между элементами был бы 60+40 пикселей, но из-за применения данного эффект он равен максимальному значению одного из элементов, в данному случае — 60 пикселям(3 клетки). Видим, что отступ дочернего блока заменяет верхний отступ для своего родителя. Если для родительского элемента задать что-либо: поле (padding) или же границу (border), то схлопывание не применится и расстояние между первым блоком и вторым будет очевидные 100 пикселей. Таким способом, можно управлять наличием данного эффекта, добавляя маленькое поле, либо же бесцветную границу, допустим, толщиной 1 пиксель, тем самым отключая эффект схлопывания.
На первый взгляд может показаться, что эфект работает только при формировании структуры как в примере выше, но это не так: схлопывание сработает и между соседними элементами, когда у них вложенные другие блоки. Рассмотрим ситуацию, когда имеется внешний блок и два блока, один с которых вложенный в другой.

Примечательно, что схлопывание в примере выше сработало два раза: сначала схлопнулись отступы родительского и дочернего элемента, потом сформировавшийся отступ схлопнулся с нижним отступом внешнего элемента.

Вывод

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

Источник

Не работает свойство border-collapse: collapse;

Спросил Temik2704,
25 октября 2013

Вопрос

Temik2704

Добрый день,Судари и Сударыни!Подскажите пожалуйста новичку,почему в моем примере не работает свойство border-collapse : collapse ;

Оно же должно по идее схлопывать границы,т.е. отображать 1 линию вместо 2х.

Если же я не прав с этим свойством — подскажите как можно по другому решить эту задачу?

P.s.Вы бы стали помещать 3 инпута в div?Или и так все в порядке?

Подскажите почему у меня на пк и на cssdesk при одинаковом коде результат отображается по разному?

2.Картинка с cssdesk

Браузер хром последней версии.

Изменено 25 октября 2013 пользователем Temik2704

Ссылка на комментарий

Поделиться на других сайтах

4 ответа на этот вопрос

Рекомендованные сообщения

Присоединяйтесь к обсуждению

Вы можете опубликовать сообщение сейчас, а зарегистрироваться позже. Если у вас есть аккаунт, войдите в него для написания от своего имени.
Примечание: вашему сообщению потребуется утверждение модератора, прежде чем оно станет доступным.

Похожие публикации

Как можно поднять фиолетовый блок (находится в MAIN) вверх , чтобы он заполнил верхнюю прозрачную часть заднего плана HEADER-а?
Свое образный переход будет.

Я не понимаю, в чём проблема в вертикальном выпадающем меню. Где я мог напортачить? Нужно сделать, чтобы колонки были по вертикали, а не по горизонтали.

IT — Avenue – курсы программирования в аудиториях и онлайн.
Реальный выпускной проект и подготовка к трудоустройству!

Avenue – современный центр подготовки IT-специалистов. Наши курсы – настоящая пошаговая инструкция о том, как стать крутым IT-специалистом и зарабатывать в $!

Направления:
Программирование (Java, PHP, Python, Scala, C++, C#, Javascript)
Веб-разработка
Разработка игр на Unreal Engine
Мобильная разработка: Android, iOS (Swift)
Робототехника
Blockchain
Дизайн: графический и Web-дизайн
Тестирование: Тестирование ПО и Автоматизированное тестирование
Разработка сайтов: интернет-магазины, CMS WordPress, HTML+CSS
Маркетинг: SMM, Интернет-маркетинг, контекстная реклама
IT и администрирование: проектный менеджмент, IT –рекрутинг
Excel (Продвинутый уровень – работа с формулами)

Почему именно IT Школа Avenue?
Обучение на практике.
Независимо от курса, мы обучаем студентов ТОЛЬКО на практике! Искренне верим в догму практического применения знаний и предпочитаем «закреплять на практике» все приобретённые навыки.
Преподаватели – реальные айти-шники, маркетологи и менеджеры.
Первое правило эффективного обучения – компетентный специалист. Мы не сотрудничаем с преподавателями ВУЗ-ов и со специалистами, чей суммарный опыт работы в IT менее 5-ти лет. Главная цель IT Avenue – подготовка квалифицированных кадров для IT-компаний, которые готовы к решению рабочих задач сразу после выпускного.
Обучение «с нуля»
Учебная программа (независимо от курса) рассчитана на новичков, которые хотят освоить профессию «с нуля». Совершенно не стоит переживать за уровень своих начальных знаний. Даже если вы никогда не открывали среду разработки – наши преподаватели помогут вам разобраться во всех тонкостях новой IT-профессии.
Единственное обязательное условие – желание обучится чему-то новому!
Онлайн сертификат и помощь в трудоустройстве.
Абсолютно все студенты получают на руки сертификат фирменного образца и его онлайн-копию, которую можно прикрепить к своему резюме.
После окончания курса каждый студент получит уникальную возможность пройти 2-х часовой Интенсив по трудоустройству, на котором опытный рекрутер расскажет об ошибках на первом собеседовании; о том, что такое Качественное резюме и об общих правилах собеседования в IT-компании.
Реальный финальный проект
Каждый курс предполагает создание Финального Проекта. Финальный проект – это программа, написанная на одном из языков программирования, созданный студентом сайт, дизайн интерфейса или маркетинговая стратегия продвижения. На последнем занятии студенты вместе с преподавателем регистрируются на сервисах создания онлайн-портфолио и размещают туда свой первый учебный проект, который будет свидетельствовать о профессиональной компетентности студента.
С нами не будет легко
Да, мы можем использовать маркетинговый ход и написать «Стать программистом за пару недель? Легко, вместе с нами!», но мы хотим быть честными со своими студентами!
Стать программистом трудно, но возможно! Вам придется: много учится, добросовестно выполнять домашние задания и повторно обрабатывать материал дома. Следуя всем нашим инструкциям и заданиям, вы будете готовы к реальному трудоустройству на 100%!
Формат и условия обучения:
занятие 2 раза в неделю по 2 часа в вечернее время: с 19:30 до 21:30 (дни занятий определяет группа)
возможны разные варианты оплаты: «Оплата одним платежом» и «Оплата частями»
возможность использовать учебный ноутбук
кофе-бар для студентов IT Avenue
Контакты:
наш телефон: 8 917 552 03 33
наш сайт: it.avenue-pro.ru

Мне нужно сделать горизонтальное меню посередине страницы. Я его сделал и через

, при этом width 100% и margin 0, но почему-то слева возник отступ от края страницы. Градиент на заднем плане — это background-image, и там болжны быть белые отступы, потому что картинка такая, а отступ у меню быть не должен..
Не подскажите, как это исправить? Код и скриншоты прилагаю.

Источник