Таблица похожа на грид, но устроена проще. Пользователь не может сортировать, менять ширину колонок. Доступны только возможности HTML-таблицы.
По умолчанию текст в ячейках переносится на новую строку:
| Incident | Description, or a long header text that wraps to the next line | Type |
|---|---|---|
| INC–20180823–05 | One or more failed attempts to open a VPN connection from 10.0.210.126 to host 10.0.221.202 within one hour | EXT. Use of phishing resources (phishingAttacks) |
| INC–20180601–5 | 10.0.64.224: average memory usage over the last 5 minutes: 49% in use | EXT. IMSI change on the SIM card, IMEI change on the phone (sim) |
| INC–20180926–31 | Zone example.com was transferred from the domain DNS server ns1.example.com to the untrusted host 10.0.0.2 over an AXFR request | INT. Use of malicious software (malware) |
| INC–20190622–238 | An attempt to list the processes running on host ns1.example.com was detected | EXT. Hosting of a malicious resource on the Internet (maliciousResources) |
Атрибут border рисует линейку под каждой строкой.
В большинстве случае стоит отказаться от линеек, но иногда они помогают поддержать конструкцию, когда в таблице есть дыры из-за того, что текст в ячейках бывает как длинным, так и коротким.
Также линейки полезны в таблицах со сложной структурой. Например, когда строки собраны в группы или некоторые ячейки объединены по вертикали.
Если строки не являются интерактивными, подсветка при наведении может вводить в заблуждение. Атрибут disableHover позволяет убрать этот эффект.
Если в таблице много строк, используйте атрибут stickyHeader, чтобы названия столбцов оставались видимыми при прокрутке.
| File | Owner | Modified |
|---|---|---|
| document.txt | User 1 | Сегодня, 07:57 |
| report-2023.pdf | User 2 | Сегодня, 07:57 |
| notes.doc | User 3 | Сегодня, 07:57 |
| archive.zip | User 4 | Сегодня, 07:57 |
| presentation.pptx | User 5 | Сегодня, 07:57 |
| budget.xlsx | User 6 | Сегодня, 07:57 |
| photo.png | User 7 | Сегодня, 07:57 |
| contract.pdf | User 8 | Сегодня, 07:57 |
| summary.doc | User 9 | Сегодня, 07:57 |
| backup.zip | User 10 | Сегодня, 07:57 |
Закрепленная шапка непрозрачна и закрывает верх области прокрутки. Когда фокус переходит на контрол выше видимой части, браузер прокручивает его к верхней границе — то есть под шапку.
Таблица учитывает высоту шапки для своих ячеек и контролов внутри них. Если в контейнере прокрутки есть другое содержимое, задайте контейнеру scroll-padding-block-start, равный высоте шапки.
Цвет шапки задает токен --kbq-table-sticky-header-background. По умолчанию это фон страницы. Если таблица находится на карточке, в модальном окне или в сайдпанели, переопределите цвет шапки под эту поверхность:
--kbq-table-sticky-header-background: var(--kbq-background-card);