powered by simpleCommunicator - 2.0.59     © 2025 Programmizd 02
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Двойная линия под Шапкой Таблицы
11 сообщений из 11, страница 1 из 1
Двойная линия под Шапкой Таблицы
    #39627061
Фотография CrazyMihey
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Всем Hi!
Приспичило тут отделить Заголовок и Подвал Таблицы при помощи Двойных Линий. На первый Взгляд — Задача на «Два Пальца», но, как обычно, это только «На первый»…
Для Подвала сделал так:
Код: css
1.
2.
3.
4.
Table.Results > TFoot > TR:first-child
 {Border-Top-Width: 3px;
  Border-Top-Style: Double;
 }


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


Не заработало на Старых Браузерах и при использовании RowSpan в этой самой Шапке (отнюдь, не редкий Случай), Растянутая Ячейка не получила свою Двойную Черту ⇒ стало НеКрасиво.
В итоге пришлось «Подчёркивать» ПоЯчеечно, то есть приделать Двойную Линию Ячейке, находящейся в N-ой снизу Строке, только если эта Ячейка имеет Высоту N-Строк:
Код: css
1.
2.
3.
4.
5.
6.
7.
8.
…
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 прерывает Нижнюю Полоску из Двойной Линии на Пересечении «═̷╧═╣» (в Тексте такое не изобразить). См. Нижнюю Правую Ячейку в приведённом Примере.
Подобные Косяки, скорее всего, неискоренимы на СоВременном Уровне Развития Информационных Технологий, но, возможно, Кто-нибудь уже боролся с подобным?
...
Рейтинг: 0 / 0
Двойная линия под Шапкой Таблицы
    #39627068
Фотография hVostt
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
CrazyMihey,

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

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


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

Лупашит грабля по лбу? А ты борись! Наступай сильнее! Или грабля или лоб, или падишах помрёт, или осёл.
...
Рейтинг: 0 / 0
Двойная линия под Шапкой Таблицы
    #39627079
Фотография CrazyMihey
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
hVosttОсновная проблема здесь в том, что для вёрстки выбраны таблицы.
Стиль Вёрстки тут не при делах, Речь идёт о Таблицах с Данными (Отображение Статистики, Результаты Сравнения, …), см. Пример выше.
Запилить Таблицу чисто на Блоках тоже, конечно, можно, но реально Писанины выйдет больше, да и разваливаться Оно будет чаще.
...
Рейтинг: 0 / 0
Двойная линия под Шапкой Таблицы
    #39627130
Фотография hVostt
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
CrazyMiheyСтиль Вёрстки тут не при делах, Речь идёт о Таблицах с Данными (Отображение Статистики, Результаты Сравнения, …), см. Пример выше.
Запилить Таблицу чисто на Блоках тоже, конечно, можно, но реально Писанины выйдет больше, да и разваливаться Оно будет чаще.

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

Такие стили не могут быть строго регламентированы. Хотите, чтобы всё выглядело пиксель в пиксель одинаково у всех, используйте спрайты, SVG, canvas, попиксельную вёрстку.
...
Рейтинг: 0 / 0
Двойная линия под Шапкой Таблицы
    #39627146
Фотография CrazyMihey
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Честно говоря, не удивлён. Идеи HTML и CSS, вообще-то, подразумевают Простоту и Универсальность. ПоПиксельно, к сожалению, не получится.
    Спрайты хороши в ряде Ситуаций при ограниченном Применении, но на одних Спрайтах всю Страницу не состряпать — придётся отлавливать МышеКлики на основе Коодринат SVG — шикарнейшая Вещь, но Совместимость в Браузерах до сих пор хромает Хотя, Некоторые пытаются рисовать даже Таблицы на SVG… Canvas тоже только для определённого Круга Задач, хотя и более гибкий, чем Спрайты. Ещё бывают Верстальщики, которые весь Сайт на Флэше (и когда же Флэш наконец-то окончательно загнётся?) ваяют и Им насрать на Поддержку Платформами/ОСями/Браузерами… Флэш, конечно, не плохой и не тормознутый (Сам по Себе, не считая КривоПисов), Он просто проприетарный и глючный.
Я же спрашивал про простые Вещи, Стандартизированные и Обкатанные (если так можно выразиться). Например, Мой Любимый Огнелис рисует Скруглённые Уголки всегда Сплошной Линией, если Рамка задаётся Пунктиром, а Опера неправильно обрабатывает Transition, если задать Начало в Процентах, а Конец — в Пикселях. Но Кое‑Кому иногда удаётся разобраться с подобными Глючка́ми, а Некоторые даже делятся Своими Победами над «КроссБраузерностью» — для Этого и существуют Форумы.
...
Рейтинг: 0 / 0
Двойная линия под Шапкой Таблицы
    #39627150
tip78
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
CrazyMiheyВ ходе Тестирования также обнаружилась пара неприятных Особенностей:
1. Пересечение Двойных Горизонтальных Линий с Одинарными Вертикальными выглядят как Пересечение «╪» в FireFox, а в Chromium и Opera Вертикальная Линия разрывается «╧╤» (Sorry, немного съехала) — отсутствует КроссБраузерное ПоПиксельное ОдноОбразие.
2. Если в Первой Строке Подвала используются Ячейки с ColSpan="2" (особенно в Последнем Столбце), то Opera рисует «как надо», то есть «═╧═╣», Chromium разрывает Правую Границу «═╧══», а FireFox прерывает Нижнюю Полоску из Двойной Линии на Пересечении «═̷╧═╣» (в Тексте такое не изобразить). См. Нижнюю Правую Ячейку в приведённом Примере.
Подобные Косяки, скорее всего, неискоренимы на СоВременном Уровне Развития Информационных Технологий, но, возможно, Кто-нибудь уже боролся с подобным?
в css есть: "border-collapse: separate - у каждой ячейки своя собственная рамка и в местах стыка 2 линии. collapse - 1 линия между ячейками"
не оно?
а что касается "вставить двойную линию", то просто пустую строку, не?
...
Рейтинг: 0 / 0
Двойная линия под Шапкой Таблицы
    #39627161
Фотография CrazyMihey
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
tip78в css есть: "border-collapse: separate
Border-Collapse, естественно, установлен в "Collapse", «Двоение» подразумевается при помощи Стиля Рамки.
tip78а что касается "вставить двойную линию", то просто пустую строку, не?
«вставить пустую строку» = однозначно «не» Структура HTML не должна пострадать (В Идеале, конечно)
...
Рейтинг: 0 / 0
Двойная линия под Шапкой Таблицы
    #39627514
SQLPowerUser
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
CrazyMihey,

несложный скрипт для подвала: http://jsfiddle.net/cN57x/6/
Переделаете для шапки?
...
Рейтинг: 0 / 0
Двойная линия под Шапкой Таблицы
    #39627538
Фотография hVostt
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
...
Рейтинг: 0 / 0
Двойная линия под Шапкой Таблицы
    #39627575
Фотография CrazyMihey
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
SQLPowerUserCrazyMihey,

несложный скрипт для подвала: http://jsfiddle.net/cN57x/6/
Переделаете для шапки?
Брутально и «В Лоб».
Спасибо, но по возможности, хотелось бы обойтись без JavaScript, хотя бы в Косметических Вопросах. А Скрипт Ваш годный, Идея понятна.
...
Рейтинг: 0 / 0
Двойная линия под Шапкой Таблицы
    #39627587
Фотография CrazyMihey
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
hVosttCrazyMihey,

http://htmlbook.ru/css/border-image
Вот, похоже, что только так и придётся исправлять МироВоззрение Авторов Браузеров под «Свои» Нужды. Выглядит конечно, страшновато, но поDOOMав, вижу, что если вместо URL использовать что-то типа "Data:Image/PNG;base64,…", то можно избежать Множества Запросов, а если ещё и SVG в Бордюр приколхозить, то, возможно, получится к тому же брать Цвет и Толщину Рамки из Глобальных Стилей.
Код: plaintext
						Благодарю за Идею!
...
Рейтинг: 0 / 0
11 сообщений из 11, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Двойная линия под Шапкой Таблицы
Найденые пользователи ...
Разблокировать пользователей ...
Читали форум (0):
Пользователи онлайн (0):
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]