Tables should scroll when overlapping, and collapse when the screen is too narrow.
Notes
https://designsystem.digital.gov/components/table/
https://www.w3.org/WAI/WCAG21/Understanding/reflow.html
https://css-tricks.com/responsive-data-tables/
https://css-tricks.com/responsive-data-table-roundup/
https://www.w3.org/TR/CSS2/tables.html
Table wrapper
https://codepen.io/mortona42/pen/WNYmLEB
Class added in table.html.twig.
.overflow-x-scroll {
overflow-x: scroll;
}Table CSS
Content
Link underline shows on hover only.
Use title class to hide link style.
How to prevent label wrapping (Content type).
Manage fields
This doesn't really need to be a table, however Manage Form/Display uses tabledrag so it will be consistent at least.
Not mobile friendly.
Extensions
Some admin styles taking over the table.
Retrograde.com parts variations
https://www.retrograde.bike/taxonomy/term/75
uses .views-breakout-content utility class.
.breakout (in uno config) sets full view width at lg breakpoint.
Table should scroll on overflow (might only work when under lg breakpoint, needs testing).
Issues
- Add another responsive tables solution that doesn't hide content
- Broken handle in nested draggable tables
- Inline errors not working on form table elements
- Allow #states to work even for elements without the form_element theme wrapper
- Introduce a class to hide borders for tables
- Improper position of the progress throbber
- Tables overflow on mobile
- Improve horizontally scrollable table behavior for non-touch users
- Table displaying on mobile
- Sticky table headers float instead of being sticky at the top on narrow screens
Modules to try
Ckeditor Responsive Table
Uses Tabled library.
Responsive Tables Filter
Uses tablesaw (jQuery).
Responsive Table Filter
Alistapart tables horizontal scrolling.
Responsive Wrappers
WYSIWYG content wrappers.
Simple Responsive Table
Outdated.
View Responsive Table
Outdated.