Extract table component, use for blog tags

assets/less/components/table.less

@@ -1,8 +1,16 @@
+.table-responsive {
+    @apply .mb-4 .border .w-full;
+    overflow-x: auto;
+    overflow-y: hidden;
+}
+
+.table-responsive table {
+    @apply .mb-0 .border-0 .whitespace-no-wrap;
+}
+
 .table {
     @apply .w-full;
     @apply .table-collapse;
-    @apply .border;
-    @apply .border-grey-light;
 }
 
 .table tr:nth-child(odd) {
@@ -10,9 +18,9 @@
 }
 
 .table tr th {
-    @apply .text-left .p-2 .bg-white;
+    @apply .text-left .p-3 .bg-white;
 }
 
 .table td {
-    @apply .px-2 .py-3 .border-t;
+    @apply .px-3 .py-3 .border-t;
 }

assets/less/main.less

@@ -62,9 +62,6 @@ svg {
 
 .table-collapse { border-collapse: collapse }
 
-.overflow-x-auto { overflow-x: auto; }
-.overflow-y-hidden { overflow-y: hidden; }
-
 @import 'components/listing';
 @import 'components/post';
 @import 'components/post/about-author';

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

@@ -1,5 +1,5 @@
 <tr>
-    <td class="whitespace-no-wrap">
+    <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="whitespace-no-wrap">
+        <td>
             {% if row.talk.url is not empty %}
                 <a href="{{ row.talk.url }}">
                     {{ row.talk.title }}
@@ -29,7 +29,7 @@
         </td>
     {% endif %}
 
-    <td class="whitespace-no-wrap">
+    <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="whitespace-no-wrap">
+        <td>
             {% if row.event.feedback and row.event.date <= today %}
                 <a href="{{ row.event.feedback }}"
                    class="button"

source/_includes/talks-table.html.twig

@@ -1,5 +1,5 @@
-<div class="overflow-x-auto overflow-y-hidden w-full mb-4 border">
-    <table class="table w-full mb-0 border-0">
+<div class="table-responsive">
+    <table class="table">
         <thead>
             <tr>
                 <th class="w-1/4">Date</th>

source/blog/tags/tag.html

@@ -15,7 +15,7 @@ generator:
 {% block content %}
     <h1>Tag: {{ page.tag }}</h1>
 
-    <div class="overflow-auto">
+    <div class="table-responsive">
         <table class="table">
             <thead>
                 <tr>