Fix table vs Gutenberg

Author: Cocola

src/scss/base/_text.scss

@@ -129,23 +129,13 @@ small {
 table {
 	margin: $base-spacing 0;
 	width: 100%;
-	border: $base-border;
+	border: 0;
 	border-collapse: collapse;
-	border-left: 0;
-	border-radius: $base-border-radius;
-
-	th {
-		padding: $half-base-spacing;
-		border-left: 1px solid $base-border-color;
-		border-top: 0;
-		vertical-align: top;
-		text-align: left;
-	}
 
+	th,
 	td {
 		padding: $half-base-spacing;
-		border-top: 1px solid $base-border-color;
-		border-left: 1px solid $base-border-color;
+		border: 1px solid $base-border-color;
 		vertical-align: top;
 		text-align: left;
 	}

src/scss/wp/_gutenberg.scss

@@ -84,6 +84,11 @@
             margin-bottom: 0;
         }
     }
+
+    // Block Table
+    &-table {
+        // Actually WordPress handle overflow scroll x on mobile
+    }
 }
 
 //Paragraph

src/templates/02-page-default.php

@@ -174,26 +174,31 @@
 							<td>Employee</td>
 							<td>Salary</td>
 							<td>Position</td>
+							<td>Annoying Column for Mobile</td>
 						</tr>
 						<tr>
 							<td>Jane Doe<br></td>
 							<td>$100k</td>
 							<td>CEO</td>
+							<td>Lorem ipsum dolor sit amet.</td>
 						</tr>
 						<tr>
 							<td>John Doe</td>
 							<td>$100k</td>
 							<td>CTO</td>
+							<td>Lorem ipsum dolor sit amet.</td>
 						</tr>
 						<tr>
 							<td>Jane Bloggs</td>
 							<td>$100k</td>
 							<td>Engineering</td>
+							<td>Lorem ipsum dolor sit amet.</td>
 						</tr>
 						<tr>
 							<td>Fred Bloggs</td>
 							<td>$100k</td>
-							<td>Marketing</td>
+							<td>Marketing Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nam delectus velit aperiam fugit modi harum, accusamus eos aliquam provident adipisci?</td>
+							<td>Lorem ipsum dolor sit amet.</td>
 						</tr>
 					</tbody>
 				</table>