Twenty Seventeen: Make table styles more consistent

* Removes the left padding on the first cell in a row, and the right padding on the last cell in each row - the padding is still there between cells, so the contents don't meet.
* Does the opposite for RTL, and fixes some spacing issues.
* Updates the editor styles to match.

Props laurelfulford, snacking.

Fixes #38447.


git-svn-id: https://develop.svn.wordpress.org/trunk@38963 602fd350-edb4-49c9-b593-d223f7449a82

src/wp-content/themes/twentyseventeen/assets/css/editor-style.css

@@ -264,10 +264,39 @@ dd {
 }
 
 table {
+	border-collapse: collapse;
 	margin: 0 0 1.5em;
 	width: 100%;
 }
 
+thead th {
+	border-bottom: 2px solid #bbb;
+	padding-bottom: 0.5em;
+}
+
+th {
+	padding: 0.4em;
+	text-align: left;
+}
+
+tr {
+	border-bottom: 1px solid #eee;
+}
+
+td {
+	padding: 0.4em;
+}
+
+th:first-child,
+td:first-child {
+	padding-left: 0;
+}
+
+th:last-child,
+td:last-child {
+	padding-right: 0;
+}
+
 a {
 	-webkit-box-shadow: inset 0 -1px 0 rgba(15, 15, 15, 1);
 	box-shadow: inset 0 -1px 0 rgba(15, 15, 15, 1);

src/wp-content/themes/twentyseventeen/rtl.css

@@ -48,6 +48,18 @@ li > ol {
 	margin-right: 1.5em;
 }
 
+th:first-child,
+td:first-child {
+	padding-left: 0.4em;
+	padding-right: 0;
+}
+
+th:last-child,
+td:last-child {
+	padding-left: 0;
+	padding-right: 0.4em;
+}
+
 /* Forms */
 
 input[type="radio"],
@@ -496,7 +508,7 @@ input[type="checkbox"] {
 	}
 }
 
-@media screen and ( min-width: 67em ) {
+@media screen and (min-width: 67em) {
 
 	/* Sticky posts */
 
@@ -506,7 +518,7 @@ input[type="checkbox"] {
 	}
 }
 
-@media screen and ( min-width: 79em ) {
+@media screen and (min-width: 79em) {
 
 	.has-sidebar #primary .entry-content blockquote.alignright,
 	.has-sidebar #primary .entry-content blockquote.alignright.below-entry-meta {

src/wp-content/themes/twentyseventeen/style.css

@@ -1114,7 +1114,7 @@ thead th {
 }
 
 th {
-	padding: 0.4em 0;
+	padding: 0.4em;
 	text-align: left;
 }
 
@@ -1126,6 +1126,16 @@ td {
 	padding: 0.4em;
 }
 
+th:first-child,
+td:first-child {
+	padding-left: 0;
+}
+
+th:last-child,
+td:last-child {
+	padding-right: 0;
+}
+
 /*--------------------------------------------------------------
 # Links
 --------------------------------------------------------------*/