Данный репозиторий - версия решения первого задания без использования JavaScript*.
Ссылка на работающий пример: yandex-task-one.
Ниже будет разобрана реализация наиболее интересных пунктов задания (потому что местами это выглядит как трэш странно)
* JS используется только для генерации статического контента, и не реализует UI
Отображение подходящих под фильтр строк таблицы происходит добавлением правила display: table-row; к элементам подходящим под такой селектор .table-filter__check_arrive:checked ~ .table .table-filter__row_arrive. Из этого следует две вещи. Первая - неотображаемые элементы остаются в разметке и, как следствие, влияют на четность(следующий пункт) строк, вторая - не должно быть элемента-обертки(родителя, wrapper'a) у чекбоксов, иначе мы не сможем использовать ~ general simblings cooperator для отображения, так как он работет лишь на элементах с общим, прямым родителем, то есть - на соседях. И, так как селектора родителя в спецификации пока нет, обойти это не вышло. Отстутствие же враппера приводит нас к проблеме, связанной с третьим пунктом данного раздела - sticky header.
Как было замечено выше, использование псевдо-класса :nth-child(odd) невозможно, в силу того, что ненужные элементы не удаляются из разметки, а просто не показываются. Так как JS мы не используем - :visible(jQuery) тоже не вариант. Поэтому, я использую просто бэкграунд с чередующимися полосами. Его, вероятно, можно было сделать и с помощью backround-image: [-vendor-]linear-gradient(to bottom, white 0, white 50%, black 50%, black 100%); background-repeat: repeat;, т.е. без использования картинки, но я решил не заморачиваться.
Теперь самое интересное, на мой взгляд.
Все бы хорошо - просто делаем копию <thead> c position: fixed; top: 0; и радуемся, но нет... над таблицей должны быть чекбоксы, и хедер должен прилипать к верхнему краю экрана в момент, когда прокрутка доходит до верхнего края таблицы. Вроде как, есть postion: sticky, но я не стал его использовать из-за очень сырой поддержки браузерами. На JS(на примере jQuery) достаточно было просто сделать копию, изначально скрытую, и показывать ее когда $document.scrollTop() >= $header.offsetTop(). Но jQuery, да и вообще скриптов, у нас нет. Поступим иначе.
Пусть, fixed-копия видна всегда. Просто она находится "под всем", что до таблицы (z-index), и над таблицей(при прокрутке), получается что "прикленная" копия как бы "выползает" из-под хедера при прокрутке. Выглядит не так уж плохо даже при очень медленном скролле, да и при обычной скорости прокрутки этого не заметно, и создается эффект приклеивания при прокрутке. Победа! На самом деле, пока нет(
Как упоминалось в первом пункте над таблицей чекбоксы у которых нет враппера. Соответственно копию хедера закрыть нечем. Поэтому я использую дополнительный пустой элемент div.g-cheat с белым фоном, который позиционируется абсолютно, занимает все пространство от верха экрана до таблицы, закрывая собой копию-хедера, при этом чекбоксы прилета-вылета располагаю над ним с помощью z-index.
Теперь необходимый эффект, хоть и с большими костылями(смотри В Заключение) достигнут.
- страница оптимизирована для печати через
@media print - добавлены media query для iPhone 4-6, iPad, iPad min. В принципе, старался оптимизировать мобильный вид: размер шрифта, сокрытие ненужного в зависимости от ориентации девайса и т.п.
- подсветка важных статусов: приземлился, отменен, задерживается до, вылетел.
- ну и мелочь - кастомизация чекбокса.
Я понимаю, что реализация на чистом css некоторых фич является нестабильным, местами костыльным решением, и сделана просто из challenge accepted интереса и спровоцирована словосочетанием "если удастся" из задания:
... если вам удастся реализовать табло без JavaScript.
Спасибо за внимание.