My goal is to create an HTML table that will display the td's in a stacked, card-like form when viewed on mobile devices.
While it works correctly on a narrow desktop screen, the problem arises when viewing it on mobile.
I've realized that the viewport setting is essential but hasn't resolved the issue.
Are there any other suggestions?
I've tried multiple tutorials and codePens claiming to provide code for a "mobile-friendly cards style responsive table", but unfortunately, none of them work on real mobile devices tested on iOS 12 Safari or Chrome.
In the best-case scenario, the table appears unusual; in the worst case, it remains horizontal.
<style>
body {
font-family: "Open Sans", sans-serif;
line-height: 1.25;
}
...
</style><html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link async href="./style.css" rel="stylesheet" type="text/css" media="screen, projection"/>
</head>
<body>
<table>
<caption>Documents Details</caption>
<thead>
...
</tbody>
</table>
</body>
</html>My expectation was for the table rows to stack vertically like cards on mobile, but this isn't happening. Surprisingly, it works fine on desktops.
Here's a JsFiddle.
What do you think could be causing this issue?