TGViewer
Веб-страница Веб-страница @tproger_web · 22.4K subscribers
Post #6532 909
Как сверстать диагональную шапку таблицы доступнее

Эрик Мейер разбирает шапку таблицы Apollo 16: угол разделён диагональю между подписями строк и столбцов. Доступность двух span в одной ячейке показалась ему сомнительной.

Он оставил подписи в двух строках thead, растянул заголовки на обе строки через rowspan и наложил вторую строку на первую. Диагональ рисует CSS-градиент. Safari не применяет относительное позиционирование к thead, поэтому потребовался обход через @supports.

В разборе Эрика Мейера есть код. Базовые тесты не выявили крупных проблем, но гарантии для всех экранных дикторов нет. Если нужна такая ячейка, сохраните табличную семантику, проверьте раскладку в Safari и навигацию в экранных дикторах.
  • ❤ 2
More from @tproger_web
  1. Sep 22, 2026Когда ИТ-проекту нужно быстро масштабироваться, а своего железа нет Знакомая ситуация: пуб…
  2. Sep 22, 2026Как публиковать блог через Standard.site и AT Protocol Standard.site задаёт схему JSON-зап…
  3. Sep 21, 2026Фреймворки меняются, а логика и процессы в работе над проектами всегда останутся главными.…
  4. Sep 21, 2026Почему HTML-атрибут accept ухудшает загрузку файлов и чем его заменить Атрибут accept в по…
  5. Sep 21, 2026Как уместить динамическую карту мира в 10 КБ Карта Calibre показывает пользовательские сес…
  6. Sep 21, 2026Как перенести поиск по 272 тысячам слов в браузер на Rust и WebAssembly Поисковик работает…
Threads Profile ViewerView any public Threads profile without an account.Open ThreadLook →Writing with AI? Make it sound human.Metric37 rewrites AI drafts so they read naturally. Free AI detector, 1,500 words free.Try Metric37 →