Repository: Automattic/juice
Pull request #315 (2018-09-28 13:35:03)

Add TH to list of elements that can receive width and height attributes
Because of a box model bug in older Android versions (I believe stripping doctype), the easiest way to make columns properly stack in a responsive design is to use `<th>` instead of `<td>`.

For those using `<th>`, this pull request covers them out-of-the-box, as you always need to declare attribute widths/heights on table cells, for Outlook.


Patch:
diff --git a/lib/inline.js b/lib/inline.js
index 5995526..0066068 100644
--- a/lib/inline.js
+++ b/lib/inline.js
@@ -5,8 +5,8 @@ var utils = require('./utils');
 module.exports = function makeJuiceClient(juiceClient) {
 
 juiceClient.ignoredPseudos = ['hover', 'active', 'focus', 'visited', 'link'];
-juiceClient.widthElements = ['TABLE', 'TD', 'IMG'];
-juiceClient.heightElements = ['TABLE', 'TD', 'IMG'];
+juiceClient.widthElements = ['TABLE', 'TD', 'TH', 'IMG'];
+juiceClient.heightElements = ['TABLE', 'TD', 'TH', 'IMG'];
 juiceClient.tableElements = ['TABLE', 'TD', 'TH', 'TR', 'TD', 'CAPTION', 'COLGROUP', 'COL', 'THEAD', 'TBODY', 'TFOOT'];
 juiceClient.nonVisualElements = [ 'HEAD', 'TITLE', 'BASE', 'LINK', 'STYLE', 'META', 'SCRIPT', 'NOSCRIPT' ];
 juiceClient.styleToAttribute = {


Test patch:
diff --git a/test/cases/juice-content/height-attr.html b/test/cases/juice-content/height-attr.html
index 6df5f0e..7ae678a 100644
--- a/test/cases/juice-content/height-attr.html
+++ b/test/cases/juice-content/height-attr.html
@@ -1,10 +1,10 @@
 <html>
 <head>
     <style>
-        p, td.px, img.px {
+        p, td.px, th.px, img.px {
             height: 200px;
         }
-        td.percentage, img.percentage {
+        td.percentage, th.percentage, img.percentage {
             height: 50%;
         }
     </style>
@@ -12,6 +12,14 @@
 <body>
     <p>none</p>
     <table>
+        <tr>
+            <th class="px">
+                header 1
+            </th>
+            <th class="percentage">
+                header 2
+            </th>
+        </tr>
         <tr>
             <td class="px">
                 high
diff --git a/test/cases/juice-content/height-attr.out b/test/cases/juice-content/height-attr.out
index 1be392e..fcf210b 100644
--- a/test/cases/juice-content/height-attr.out
+++ b/test/cases/juice-content/height-attr.out
@@ -5,6 +5,14 @@
 <body>
     <p style="height: 200px;">none</p>
     <table>
+        <tr>
+            <th class="px" style="height: 200px;" height="200">
+                header 1
+            </th>
+            <th class="percentage" style="height: 50%;" height="50%">
+                header 2
+            </th>
+        </tr>
         <tr>
             <td class="px" style="height: 200px;" height="200">
                 high
diff --git a/test/cases/juice-content/width-attr.html b/test/cases/juice-content/width-attr.html
index 6ecb4ef..b08dc46 100644
--- a/test/cases/juice-content/width-attr.html
+++ b/test/cases/juice-content/width-attr.html
@@ -1,10 +1,10 @@
 <html>
 <head>
     <style>
-        p, td.px, img.px {
+        p, td.px, th.px, img.px {
             width: 200px;
         }
-        td.percentage, img.percentage {
+        td.percentage, th.percentage, img.percentage {
             width: 50%;
         }
     </style>
@@ -12,6 +12,14 @@
 <body>
     <p>none</p>
     <table>
+        <tr>
+            <th class="px">
+                header 1
+            </th>
+            <th class="percentage">
+                header 2
+            </th>
+        </tr>
         <tr>
             <td class="px">
                 wide
diff --git a/test/cases/juice-content/width-attr.out b/test/cases/juice-content/width-attr.out
index f404ee3..a3b25e3 100644
--- a/test/cases/juice-content/width-attr.out
+++ b/test/cases/juice-content/width-attr.out
@@ -5,6 +5,14 @@
 <body>
     <p style="width: 200px;">none</p>
     <table>
+        <tr>
+            <th class="px" style="width: 200px;" width="200">
+                header 1
+            </th>
+            <th class="percentage" style="width: 50%;" width="50%">
+                header 2
+            </th>
+        </tr>
         <tr>
             <td class="px" style="width: 200px;" width="200">
                 wide