Changeset 38963

Timestamp:

10/26/2016 05:24:06 PM (9 years ago)

Author:

davidakennedy

Message:

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.

Location:

trunk/src/wp-content/themes/twentyseventeen

Files:

• assets/css/editor-style.css (modified) (1 diff)
• rtl.css (modified) (3 diffs)
• style.css (modified) (2 diffs)

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

@@ -265 +265 @@
 
 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;
 }
 

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

@@ -47 +47 @@
     margin-left: 0;
     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;
 }
 
@@ -497 +509 @@
 }
 
-@media screen and ( min-width: 67em ) {
+@media screen and (min-width: 67em) {
 
     /* Sticky posts */
@@ -507 +519 @@
 }
 
-@media screen and ( min-width: 79em ) {
+@media screen and (min-width: 79em) {
 
     .has-sidebar #primary .entry-content blockquote.alignright,

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

@@ -1115 +1115 @@
 
 th {
-    padding: 0.4em 0;
+    padding: 0.4em;
     text-align: left;
 }
@@ -1125 +1125 @@
 td {
     padding: 0.4em;
+}
+
+th:first-child,
+td:first-child {
+    padding-left: 0;
+}
+
+th:last-child,
+td:last-child {
+    padding-right: 0;
 }