Добро пожаловать в форум, Guest  >>   Войти | Регистрация | Поиск | Правила | В избранное | Подписаться
Все форумы / HTML, JavaScript, VBScript, CSS Новый топик    Ответить
 Двойная линия под Шапкой Таблицы  [new]
CrazyMihey
Member

Откуда: Россия, Москва
Сообщений: 498
Всем Hi!
Приспичило тут отделить Заголовок и Подвал Таблицы при помощи Двойных Линий. На первый Взгляд — Задача на «Два Пальца», но, как обычно, это только «На первый»…
Для Подвала сделал так:
Table.Results > TFoot > TR:first-child
 {Border-Top-Width: 3px;
  Border-Top-Style: Double;
 }

Заработало везде (но везде неправильно при ColSpan="2" в последнем Столбце Первой Строки Подвала, см. Пример Ниже↡)
Для Шапки, соответственно:
Table.Results > THead > TR:last-child
 {Border-Bottom-Width: 3px;
  Border-Bottom-Style: Double;
 }

Не заработало на Старых Браузерах и при использовании RowSpan в этой самой Шапке (отнюдь, не редкий Случай), Растянутая Ячейка не получила свою Двойную Черту ⇒ стало НеКрасиво.
В итоге пришлось «Подчёркивать» ПоЯчеечно, то есть приделать Двойную Линию Ячейке, находящейся в N-ой снизу Строке, только если эта Ячейка имеет Высоту N-Строк:
Table.Results > THead > TR:nth-last-child( 3 ) > TH[RowSpan*= "3"], Table.Results > THead > TR:nth-last-child( 3 ) > TD[RowSpan*= "3"],
Table.Results > THead > TR:nth-last-child( 2 ) > TH[RowSpan*= "2"], Table.Results > THead > TR:nth-last-child( 2 ) > TD[RowSpan*= "2"],
Table.Results > THead > TR:nth-last-child( 1 ) > TH[RowSpan*= "1"], Table.Results > THead > TR:nth-last-child( 1 ) > TD[RowSpan*= "1"],
Table.Results THead TR:last-child TH, Table.Results THead TR:last-child TD
 {Border-Bottom-Width: 3px;
  Border-Bottom-Style: Double;
 } /* Sorry за НеФорматированный Код, привожу здесь, чтобы было понятно, о чём речь */

Работает на ещё меньшем Множестве Браузеров.
Конструкция «*=» использована для того, чтобы дать возможность писать в HTML «RowSpan="3"», «RowSpan=3», «RowSpan="03"», «RowSpan=' 3'», … Если использовать «=», то Значение RowSpan должно будет указываться строго точно также, как в CSS, либо придётся составить Правила «На Все Случаи», но Код CSS тут и так уже сильно распухший. Однако, использование «*=» способно ошибочно «подчеркнуть», например, RowSpan*= "2" в 12-й снизу Строке, что является недопустимым Багом. :(
Данный Код изобилует Недостатками:
Он очень Громоздкий (Приведено для 3-х Строчек, но Шапка может быть и на Пол-Экрана), НеУниверсальный (При написании CSS не DOOMаешь, что Шапка может быть и на Пол-Экрана), СложноНавороченный (Существуют Подозрения, что Любой Браузер будет НеОправданно истязать Проц и Память Клиента при подобном Количестве Правил) и вообще какой-то НеПриятный на Вид :)
Может быть, у МногоУважаемых Читателей Данной Темы имеются какие-либо Соображения против ВышеУпомянутых Недостатков? SASS, LESS, PreCSS, PostCSS и прочие JavaScriptы не рассматриваются в силу Их собственных Недостатков.
Пример Использования: HTTP://JSFiddle.Net/ptz4n3qh
В ходе Тестирования также обнаружилась пара неприятных Особенностей:
1. Пересечение Двойных Горизонтальных Линий с Одинарными Вертикальными выглядят как Пересечение «╪» в FireFox, а в Chromium и Opera Вертикальная Линия разрывается «╧╤» (Sorry, немного съехала) — отсутствует КроссБраузерное ПоПиксельное ОдноОбразие.
2. Если в Первой Строке Подвала используются Ячейки с ColSpan="2" (особенно в Последнем Столбце), то Opera рисует «как надо», то есть «═╧═╣», Chromium разрывает Правую Границу «═╧══», а FireFox прерывает Нижнюю Полоску из Двойной Линии на Пересечении «═̷╧═╣» (в Тексте такое не изобразить). См. Нижнюю Правую Ячейку в приведённом Примере.
Подобные Косяки, скорее всего, неискоренимы на СоВременном Уровне Развития Информационных Технологий, но, возможно, Кто-нибудь уже боролся с подобным?
6 апр 18, 23:38    [21320216]     Ответить | Цитировать Сообщить модератору
 Re: Двойная линия под Шапкой Таблицы  [new]
hVostt
Member

Откуда:
Сообщений: 15173
CrazyMihey,

Основная проблема здесь в том, что для вёрстки выбраны таблицы. Собственно, как правильно поедать кактус и получать при этом изощрённое удовольствие, вы похоже хорошо знаете, а мне добавить нечего.

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


CrazyMihey
Подобные Косяки, скорее всего, неискоренимы на СоВременном Уровне Развития Информационных Технологий, но, возможно, Кто-нибудь уже боролся с подобным?


Лупашит грабля по лбу? А ты борись! Наступай сильнее! Или грабля или лоб, или падишах помрёт, или осёл.
7 апр 18, 00:02    [21320250]     Ответить | Цитировать Сообщить модератору
 Re: Двойная линия под Шапкой Таблицы  [new]
CrazyMihey
Member

Откуда: Россия, Москва
Сообщений: 498
hVostt
Основная проблема здесь в том, что для вёрстки выбраны таблицы.

Стиль Вёрстки тут не при делах, Речь идёт о Таблицах с Данными (Отображение Статистики, Результаты Сравнения, …), см. Пример выше.
Запилить Таблицу чисто на Блоках тоже, конечно, можно, но реально Писанины выйдет больше, да и разваливаться Оно будет чаще.
7 апр 18, 02:59    [21320306]     Ответить | Цитировать Сообщить модератору
 Re: Двойная линия под Шапкой Таблицы  [new]
hVostt
Member

Откуда:
Сообщений: 15173
CrazyMihey
Стиль Вёрстки тут не при делах, Речь идёт о Таблицах с Данными (Отображение Статистики, Результаты Сравнения, …), см. Пример выше.
Запилить Таблицу чисто на Блоках тоже, конечно, можно, но реально Писанины выйдет больше, да и разваливаться Оно будет чаще.


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

Такие стили не могут быть строго регламентированы. Хотите, чтобы всё выглядело пиксель в пиксель одинаково у всех, используйте спрайты, SVG, canvas, попиксельную вёрстку.
7 апр 18, 14:15    [21320677]     Ответить | Цитировать Сообщить модератору
 Re: Двойная линия под Шапкой Таблицы  [new]
CrazyMihey
Member

Откуда: Россия, Москва
Сообщений: 498
Честно говоря, не удивлён. Идеи HTML и CSS, вообще-то, подразумевают Простоту и Универсальность. ПоПиксельно, к сожалению, не получится.

  • Спрайты хороши в ряде Ситуаций при ограниченном Применении, но на одних Спрайтах всю Страницу не состряпать — придётся отлавливать МышеКлики на основе Коодринат
  • SVG — шикарнейшая Вещь, но Совместимость в Браузерах до сих пор хромает Хотя, Некоторые пытаются рисовать даже Таблицы на SVG…
  • Canvas тоже только для определённого Круга Задач, хотя и более гибкий, чем Спрайты.
  • Ещё бывают Верстальщики, которые весь Сайт на Флэше (и когда же Флэш наконец-то окончательно загнётся?) ваяют и Им насрать на Поддержку Платформами/ОСями/Браузерами… Флэш, конечно, не плохой и не тормознутый (Сам по Себе, не считая КривоПисов), Он просто проприетарный и глючный.

Я же спрашивал про простые Вещи, Стандартизированные и Обкатанные (если так можно выразиться). Например, Мой Любимый Огнелис рисует Скруглённые Уголки всегда Сплошной Линией, если Рамка задаётся Пунктиром, а Опера неправильно обрабатывает Transition, если задать Начало в Процентах, а Конец — в Пикселях. Но Кое‑Кому иногда удаётся разобраться с подобными Глючка́ми, а Некоторые даже делятся Своими Победами над «КроссБраузерностью» — для Этого и существуют Форумы.
7 апр 18, 16:41    [21320786]     Ответить | Цитировать Сообщить модератору
 Re: Двойная линия под Шапкой Таблицы  [new]
tip78
Member

Откуда: Москва
Сообщений: 986
CrazyMihey
В ходе Тестирования также обнаружилась пара неприятных Особенностей:
1. Пересечение Двойных Горизонтальных Линий с Одинарными Вертикальными выглядят как Пересечение «╪» в FireFox, а в Chromium и Opera Вертикальная Линия разрывается «╧╤» (Sorry, немного съехала) — отсутствует КроссБраузерное ПоПиксельное ОдноОбразие.
2. Если в Первой Строке Подвала используются Ячейки с ColSpan="2" (особенно в Последнем Столбце), то Opera рисует «как надо», то есть «═╧═╣», Chromium разрывает Правую Границу «═╧══», а FireFox прерывает Нижнюю Полоску из Двойной Линии на Пересечении «═̷╧═╣» (в Тексте такое не изобразить). См. Нижнюю Правую Ячейку в приведённом Примере.
Подобные Косяки, скорее всего, неискоренимы на СоВременном Уровне Развития Информационных Технологий, но, возможно, Кто-нибудь уже боролся с подобным?

в css есть: "border-collapse: separate - у каждой ячейки своя собственная рамка и в местах стыка 2 линии. collapse - 1 линия между ячейками"
не оно?
а что касается "вставить двойную линию", то просто пустую строку, не?
7 апр 18, 17:00    [21320793]     Ответить | Цитировать Сообщить модератору
 Re: Двойная линия под Шапкой Таблицы  [new]
CrazyMihey
Member

Откуда: Россия, Москва
Сообщений: 498
tip78
в css есть: "border-collapse: separate

Border-Collapse, естественно, установлен в "Collapse", «Двоение» подразумевается при помощи Стиля Рамки.
tip78
а что касается "вставить двойную линию", то просто пустую строку, не?

«вставить пустую строку» = однозначно «не» Структура HTML не должна пострадать (В Идеале, конечно)
7 апр 18, 19:11    [21320931]     Ответить | Цитировать Сообщить модератору
 Re: Двойная линия под Шапкой Таблицы  [new]
SQLPowerUser
Member

Откуда: ссылка в профиле
Сообщений: 275
CrazyMihey,

несложный скрипт для подвала: http://jsfiddle.net/cN57x/6/
Переделаете для шапки?
9 апр 18, 13:47    [21323391]     Ответить | Цитировать Сообщить модератору
 Re: Двойная линия под Шапкой Таблицы  [new]
hVostt
Member

Откуда:
Сообщений: 15173
CrazyMihey,

http://htmlbook.ru/css/border-image
9 апр 18, 14:13    [21323523]     Ответить | Цитировать Сообщить модератору
 Re: Двойная линия под Шапкой Таблицы  [new]
CrazyMihey
Member

Откуда: Россия, Москва
Сообщений: 498
SQLPowerUser
CrazyMihey,

несложный скрипт для подвала: http://jsfiddle.net/cN57x/6/
Переделаете для шапки?

Брутально и «В Лоб».
Спасибо, но по возможности, хотелось бы обойтись без JavaScript, хотя бы в Косметических Вопросах. А Скрипт Ваш годный, Идея понятна.
9 апр 18, 15:42    [21324001]     Ответить | Цитировать Сообщить модератору
 Re: Двойная линия под Шапкой Таблицы  [new]
CrazyMihey
Member

Откуда: Россия, Москва
Сообщений: 498
hVostt
CrazyMihey,

http://htmlbook.ru/css/border-image

Вот, похоже, что только так и придётся исправлять МироВоззрение Авторов Браузеров под «Свои» Нужды. Выглядит конечно, страшновато, но поDOOMав, вижу, что если вместо URL использовать что-то типа "Data:Image/PNG;base64,…", то можно избежать Множества Запросов, а если ещё и SVG в Бордюр приколхозить, то, возможно, получится к тому же брать Цвет и Толщину Рамки из Глобальных Стилей.
						Благодарю за Идею!
9 апр 18, 15:54    [21324058]     Ответить | Цитировать Сообщить модератору
Все форумы / HTML, JavaScript, VBScript, CSS Ответить