From a5249feb74b2c4595595fc4c580bb0079496e6c8 Mon Sep 17 00:00:00 2001
From: Oliver Davies <oliver@oliverdavies.uk>
Date: Mon, 6 Mar 2017 20:39:47 +0000
Subject: [PATCH] Responsive tables

---
 source/_partials/talks-table.twig | 64 ++++++++++++++++---------------
 1 file changed, 33 insertions(+), 31 deletions(-)

diff --git a/source/_partials/talks-table.twig b/source/_partials/talks-table.twig
index 6a83839c..b786e7a8 100644
--- a/source/_partials/talks-table.twig
+++ b/source/_partials/talks-table.twig
@@ -1,33 +1,35 @@
-<table class="table table-striped">
-    <thead>
-        <tr>
-            <th>Date</th>
-            {% if show_talk %}<th>Talk</th>{% endif %}
-            <th>Event</th>
-        </tr>
-    </thead>
-    <tbody>
-        {% set events = reverse_order ? events|sortbyfield('date')|reverse : events|sortbyfield('date') %}
-        {% for event in events %}
+<div class="table-responsive" style="overflow-x: auto">
+    <table class="table table-striped">
+        <thead>
             <tr>
-                <td>
-                    {{ event.date|date('j F Y') }}
-                </td>
-
-                {% if show_talk %}
-                    <td>
-                        <a href="{{ event.talk.url }}">
-                            {{ event.talk.title }}
-                        </a>
-                    </td>
-                {% endif %}
-
-                <td>
-                    {% if event.website %}<a href="{{ event.website }}">{% endif %}
-                    {{ event.title }}
-                    {% if event.website %}</a>{% endif %}
-                </td>
+                <th>Date</th>
+                {% if show_talk %}<th>Talk</th>{% endif %}
+                <th>Event</th>
             </tr>
-        {% endfor %}
-    </tbody>
-</table>
+        </thead>
+        <tbody>
+            {% set events = reverse_order ? events|sortbyfield('date')|reverse : events|sortbyfield('date') %}
+            {% for event in events %}
+                <tr>
+                    <td>
+                        {{ event.date|date('j F Y') }}
+                    </td>
+
+                    {% if show_talk %}
+                        <td>
+                            <a href="{{ event.talk.url }}">
+                                {{ event.talk.title }}
+                            </a>
+                        </td>
+                    {% endif %}
+
+                    <td>
+                        {% if event.website %}<a href="{{ event.website }}">{% endif %}
+                        {{ event.title }}
+                        {% if event.website %}</a>{% endif %}
+                    </td>
+                </tr>
+            {% endfor %}
+        </tbody>
+    </table>
+</div>