What are the problems of adapting HTML tables?

HTML tables are problematic for responsive design due to their rigid block model. Cells and rows have fixed or relative, but not flexible, behavior. This leads to the following issues:

1. Container overflow: When the screen width decreases, the table may overflow its parent element, being cut off or causing horizontal scrolling, which worsens UX.
2. Reading difficulty: On small screens, columns become too narrow, and text in cells is wrapped suboptimally or cut off, making information hard to read.
3. Limited adaptation options: Standard CSS properties for flexbox or grid are poorly applicable to table elements (<tr>, <td>). It is difficult to change the order or layout of cells for better mobile display.
4. Styling complexity: Custom styling for responsiveness often requires complex selectors or hacks, which can be fragile.
5. Insufficient semantics for mobile: Flat table structures do not always convey hierarchy or data relationships well when displayed linearly on small screens (e.g., when cells "collapse").

Various techniques are used to adapt tables:

• Hiding columns on mobile (display: none;).
• Transforming the table into a list of cards (display: block; for <tr>, <td> and styling as blocks).
• Using overflow-x: auto; to create a scrollbar inside the table container.
• Adding data-* attributes to cells to display column headers when transformed into blocks.
• Specialized JavaScript plugins.