html_url,issue_url,id,node_id,user,user_label,created_at,updated_at,author_association,body,reactions,issue,issue_label,performed_via_github_app
https://github.com/simonw/datasette/issues/2010#issuecomment-1409406327,https://api.github.com/repos/simonw/datasette/issues/2010,1409406327,IC_kwDOBm6k_c5UAdV3,9599,simonw,2023-01-30T21:51:58Z,2023-01-30T21:51:58Z,OWNER,"Here's a quick prototype I knocked up for this:
```diff
diff --git a/datasette/static/app.css b/datasette/static/app.css
index 71437bd4..d763bcff 100644
--- a/datasette/static/app.css
+++ b/datasette/static/app.css
@@ -695,7 +695,48 @@ p.zero-results {
 
 
 
+/* Force table to not be like tables anymore */
+body.row table.rows-and-columns,
+body.row .rows-and-columns thead,
+body.row .rows-and-columns tbody,
+body.row .rows-and-columns th,
+body.row .rows-and-columns td,
+body.row .rows-and-columns tr {
+    display: block;
+}
+
+/* Hide table headers (but not display: none;, for accessibility) */
+body.row .rows-and-columns thead tr {
+    position: absolute;
+    top: -9999px;
+    left: -9999px;
+}
+
+body.row .rows-and-columns tr {
+    border: 1px solid #ccc;
+    margin-bottom: 1em;
+    border-radius: 10px;
+    background-color: white;
+    padding: 0.2rem;
+}
 
+body.row .rows-and-columns td {
+    /* Behave  like a ""row"" */
+    border: none;
+    border-bottom: 1px solid #eee;
+    padding: 0;
+    padding-left: 10%;
+    padding-bottom: 0.3em;
+}
+
+body.row .rows-and-columns td:before {
+    display: block;
+    color: black;
+    padding-bottom: 0.2em;
+    font-size: 0.8em;
+    font-weight: bold;
+    background-color: #f5f5f5;
+}
 
 
 /* Overrides ===============================================================*/
diff --git a/datasette/templates/row.html b/datasette/templates/row.html
index 1d1b0bfd..339eb643 100644
--- a/datasette/templates/row.html
+++ b/datasette/templates/row.html
@@ -5,6 +5,9 @@
 {% block extra_head %}
 {{- super() -}}
 <style>
+{% for column in columns %}
+body.row .rows-and-columns td:nth-of-type({{ loop.index }}):before { content: ""{{ column|escape_css_string }}""; }
+{% endfor %}
 @media only screen and (max-width: 576px) {
 {% for column in columns %}
     .rows-and-columns td:nth-of-type({{ loop.index }}):before { content: ""{{ column|escape_css_string }}""; }
```
Now the row page looks like this at all page widths:

<img width=""776"" alt=""image"" src=""https://user-images.githubusercontent.com/9599/215603142-4d020ac0-cc33-436c-a1c6-17c9bcf9edb1.png"">

I think that's better (could do with a bit of tightening up).

One catch: you can't copy and paste the column labels, since they are added using generated content like this:

https://github.com/simonw/datasette/blob/0b4a28691468b5c758df74fa1d72a823813c96bf/datasette/static/app.css#L752-L757

https://github.com/simonw/datasette/blob/0b4a28691468b5c758df74fa1d72a823813c96bf/datasette/templates/row.html#L9-L11

I think the row page should switch to different HTML entirely, rather than continuing to share the `<table>` that's used by the table page.

This will be a breaking change for users who customize Datasette, so I should aim to ship it before 1.0.","{""total_count"": 0, ""+1"": 0, ""-1"": 0, ""laugh"": 0, ""hooray"": 0, ""confused"": 0, ""heart"": 0, ""rocket"": 0, ""eyes"": 0}",1563264257,Row page should default to card view,