Move table styling into a component

assets/less/components/table.less

@@ -0,0 +1,18 @@
+.table {
+    @apply .w-full;
+    @apply .table-collapse;
+    @apply .border;
+    @apply .border-grey-light;
+}
+
+.table tr:nth-child(odd) {
+    @apply .bg-grey-lightest;
+}
+
+.table tr th {
+    @apply .text-left .p-2 .bg-white;
+}
+
+.table td {
+    @apply .p-2 .border-t;
+}

assets/less/main.less

@@ -64,6 +64,7 @@ svg {
 
 @import "components/listing";
 @import "components/post";
+@import "components/table";
 @import "components/talk/slides";
 @import "components/talk/video";
 @import "components/testimonial";

source/_includes/talks-table-row.html.twig

@@ -1,5 +1,5 @@
-<tr class="{{ loop.index is odd ? 'bg-grey-lightest' }}">
+<tr>
-    <td class="p-2 border-t">
+    <td>
         {{ row.event.date|date(row.event.fuzzy_date ? 'F Y' : 'j F Y') }}
 
         {% if row.event.time is defined %}
@@ -10,7 +10,7 @@
     </td>
 
     {% if not talk_page %}
-        <td class="p-2 border-t">
+        <td>
             {% if row.talk.url is not empty %}
                 <a href="{{ row.talk.url }}">
                     {{ row.talk.title }}
@@ -29,7 +29,7 @@
         </td>
     {% endif %}
 
-    <td class="p-2 border-t">
+    <td>
         {% if row.event.website is not empty %}
             <a href="{{ row.event.website }}">
                 {{ row.event.name }}
@@ -46,7 +46,7 @@
     </td>
 
     {% if not upcoming %}
-        <td class="p-2 border-t">
+        <td>
             {% if row.event.feedback and row.event.date <= today %}
                 <a href="{{ row.event.feedback }}"
                    class="button"

source/_includes/talks-table.html.twig

@@ -1,17 +1,17 @@
 <div class="overflow-auto">
-    <table class="w-full table-collapse border border-grey-light">
+    <table class="table">
         <thead>
             <tr>
-                <th class="w-1/4 p-2 text-left bg-white">Date</th>
+                <th class="w-1/4">Date</th>
 
                 {% if not talk_page %}
-                    <th class="w-1/3 p-2 text-left bg-white">Talk</th>
+                    <th class="w-1/3">Talk</th>
                 {% endif %}
 
-                <th class="p-2 text-left bg-white">Event</th>
+                <th>Event</th>
 
                 {% if not upcoming %}
-                    <th class="p-2 text-left bg-white">Feedback</th>
+                    <th>Feedback</th>
                 {% endif %}
             </tr>
         </thead>