Веб-страница | frontend, backend, fullstack, react, vue, javascript, typescript, css, html
IT и технологии · 22 сентября 2026 г.
Как сверстать диагональную шапку таблицы доступнее — 22 сентября 2026 г. в 08:06:35.237
Как сверстать диагональную шапку таблицы доступнее Эрик Мейер разбирает шапку таблицы Apollo 16: угол разделён диагональю между подписями строк и столбцов. Доступность двух span в одной ячейке показалась ему сомнительной. Он оставил подписи в двух строках thead, растянул заголовки на обе строки через rowspan и наложил вторую строку на первую. Диагональ рисует CSS-градиент. Safari не применяет относительное позиционирование к thead, поэтому потребовался обход через @supports. В разборе Эрика Мейера есть код. Базовые тесты не выявили крупных проблем, но гарантии для всех экранных дикторов нет. Если нужна такая ячейка, сохраните табличную семантику, проверьте раскладку в Safari и навигацию в экранных дикторах.