I've come across some HTML that resembles this structure
<html><body><table>
<thead><tr><th>A</th><th>B</th><th>C</th><th>D</th><th>E</th></tr></thead>
<tbody>
<tr><td>1A</td><td>1B</td><td>1C</td><td>1D</td><td>1E</td></tr>
<tr><td>2A</td><td>2B</td><td>2C</td><td>2D</td><td>2E</td></tr>
<tr><td>3A</td><td>3B</td><td>3C</td><td>3D</td><td>3E</td></tr>
</tbody>
</table></body></html>
Each row represents an object, with columns representing its properties. The cell values can be quite lengthy, sometimes up to 20-30 characters long. While it displays well on most devices, smaller phones may pose a problem. While I could hide certain columns on narrow devices, it doesn't feel like the right approach in this case. Currently, I have x-overflow: scroll applied to the table, but I would prefer a CSS solution that restructures the table for narrow screens as follows:
A: 1A
B: 1B
C: 1C
D: 1D
E: 1E
-----
A: 2A
B: 2B
C: 2C
D: 2D
E: 2E
-----
(etc)
Assuming I want to implement this unconditionally without device width testing, tweaking the HTML markup slightly is acceptable to add extra classes or attributes. It's important to keep using a <table> element with one <tr> per logical row due to backward compatibility reasons. Despite the availability of a cleaner API, many users still scrape the site. As a result of internal dynamics, I'd rather avoid a JavaScript solution if possible (although I'm capable of writing one if necessary).
While I've made progress with my current CSS, particularly in styling the data rows, I'm unsure how to dynamically generate the field names which are currently fixed as 'X' in my code snippet:
thead { display: none; }
table, tr, td { display: block; }
tr + tr { border-top: thin solid black; }
td::before { content: "X:"; display: inline-block; width: 2em; }
I've noticed similar designs on various websites, but finding a CSS-specific implementation has proved challenging. While this seems like a common requirement, I'm struggling to locate suitable resources or explanations due to search term ambiguity.