Add col-X classes to HTML table on custom query page

datasette/app.py

@@ -79,6 +79,7 @@ class RenderMixin(HTTPMethodView):
                 **context, **{
                     'app_css_hash': self.ds.app_css_hash(),
                     'select_templates': select_templates,
+                    'zip': zip,
                 }
             })
         )

datasette/templates/query.html

@@ -44,14 +44,14 @@
 <table>
     <thead>
         <tr>
-            {% for column in columns %}<th scope="col">{{ column }}</th>{% endfor %}
+            {% for column in columns %}<th class="col-{{ column|to_css_class }}" scope="col">{{ column }}</th>{% endfor %}
         </tr>
     </thead>
     <tbody>
     {% for row in rows %}
         <tr>
-            {% for td in row %}
+            {% for column, td in zip(columns, row) %}
-                <td>{% if td == None %}{{ "&nbsp;"|safe }}{% else %}{{ td }}{% endif %}</td>
+                <td class="col-{{ column|to_css_class }}">{% if td == None %}{{ "&nbsp;"|safe }}{% else %}{{ td }}{% endif %}</td>
             {% endfor %}
         </tr>
     {% endfor %}