Wrap your table with a
responsive-table
. Rows need
white-space: nowrap
to avoid collapsing.
Select which columns gets hidden first with
data-priority
. Otherwise, the latest column will be selected.
For important content, consider showing alternative content with
responsive-table-alt
(or a custom alt-selector).
Added bonus: your table will have a proper set of
aria-col-index
attributes.
| # | First | Last | Handle | Responsive 1 | Responsive 2 |
|---|---|---|---|---|---|
| 1 |
Mark
Visible if responsive 1 is hidden
Visible if responsive 2 is hidden
|
Otto | @mdo | This will be hidden on small screens | This too if needed on small screen |
| 2 | Jacob | Thornton | @fat | ||
| 3 | Larry the Bird | ||||
It works without a
thead
and with multiple headers. You don't even need to set
data-priority
.
| # | First | Last | Handle | Responsive 1 | Responsive 2 |
|---|---|---|---|---|---|
| Sub | Sub | Sub | |||
| 1 | Mark | Otto | @mdo | This too if needed on small screen | This will be hidden on small screens |
| 2 | Jacob | Thornton | @fat | Jacob resp 1 | Jacob resp 2 |
| 3 | Larry the Bird | Larry resp 1 | Larry resp 2 | ||
You can opt in for using the
fix-borders
class that can make up for incorrect border size due to DPI settings.
| # | Heading | Heading | Heading | Heading | Heading | Heading | Heading | Heading | Heading |
|---|---|---|---|---|---|---|---|---|---|
| 1 | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell |
| 2 | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell |
| 3 | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell |