Почему это происходит с border?

Question

[Roman_Khi]

Приветствую, знатоки!

Встретился со следующей проблемой. В браузерах от microsoft (IE, EDGE) в таблицах border "улетают". В других браузерах проблемы нет. Как решить?

.table th:before, .tablepress th:before, .sport_sekcii th:before {
    content: "";
    position: absolute;
    bottom: 0;
    height: 1px;
    width: 100%;
    border-bottom: 3px solid #00ccc5;
}

Answer 1

[Roman_Khi]

Сделал так

.table th, .tablepress th, .sport_sekcii th {
    border-bottom: 3px solid #00ccc5 !important;
}

но хотелось бы найти все же решение по изначальному вопросу с :before

Comments

[Арсений Матыцин]

Чувак, ты просто повторил мой ответ. В чем фикус?)

Answer 2

[Арсений Матыцин]

Задавать бордеры элементам таблицы, а не псевдоэлементам.

UPD: На счет базовой привязки к строке это я сдуру сморозил, каюсь. Но вообще нет никаких проблем https://codepen.io/i-am-studio_ru/pen/MWwGrYP, проверяй свои селекторы.

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

Comments

[Roman_Khi]

Если делать так:

.table th, .tablepress th, .sport_sekcii th {
    border-bottom: 3px solid #00ccc5 !important;
}

то это не решает проблему. Во всех браузер отображается верно, а в edge в принципе не отображается border.

[Арсений Матыцин]

Roman_Khi, покажи кусок верстки, чтобы предметно ответить, почему так.
Я лично не вижу, к чему привязаны да хотя бы класс .sport_sekcii.
К слову, я имел в виду задать бордер для строки. Это оптимальный вариант в данном случае (если нет необходимости сделать выборочную подсветку цветом столбцов).

[Roman_Khi]

Арсений Матыцин, да в верстке ничего особенного

<table class="table">

		<thead>
			<tr>
				<th nowrap>№ п/п</th>
				<th>Код</th>
				<th>Наименование направления подготовки</th>
				<th>Уровень образования</th>
				<th>Реализуемые формы обучения</th>
				<th>Ссылка на описание образовательной программы с приложением ее копии (адаптированные ОП с пометкой "Адаптированная ОП")</th>
				<th>Ссылка на учебный план с приложением его копии</th>
				<th>Ссылка на анотации к рабочим программам дисциплин (по каждой дисциплине в составе ОП) с приложением их копий</th>
				<th>Ссылка на календарный учебный график с приложением его копии</th>
				<th>Ссылка на программы практик с приложением их копий</th>
				<th>Ссылка на методические и иные документы, разработанные образовательной организацией для обеспечения образовательного процесса</th>
				<th>Использование при реализации ОП электронного обучения и дистанционных образовательных технологий</th>
			</tr>
		</thead>

[Roman_Khi]

Арсений Матыцин, а если я применяю к строке то в edge вот такой прикол