Merge pull request #1047 from edx/talbs/lms-tablesupport

Capa and HTML xmodules: Text Justification Styling Classes Table-based Displays

common/lib/xmodule/xmodule/css/capa/display.scss

@@ -436,10 +436,25 @@ section.problem {
   }
 
   table {
-    margin-bottom: lh();
+    margin: lh() 0;
     border-collapse: collapse;
     table-layout: auto;
 
+    td, th {
+
+      &.cont-justified-left {
+        text-align: left !important; // nasty, but needed to override the bad specificity of the xmodule css selectors
+      }
+
+      &.cont-justified-right {
+        text-align: right !important; // nasty, but needed to override the bad specificity of the xmodule css selectors
+      }
+
+      &.cont-justified-center {
+        text-align: center !important; // nasty, but needed to override the bad specificity of the xmodule css selectorsstyles
+      }
+    }
+
     th {
       text-align: left;
       font-weight: bold;

common/lib/xmodule/xmodule/css/html/display.scss

@@ -117,19 +117,31 @@ code {
 
 table {
   width: 100%;
+  margin: 20px 0;
   border-collapse: collapse;
   font-size: 16px;
-}
-
-th { 
-  background: #eee; 
-  font-weight: bold; 
-}
 
-table td, th { 
+  td, th {
     margin: 20px 0;
     padding: 10px;
     border: 1px solid #ccc;
-  text-align: left;
     font-size: 14px;
+
+    &.cont-justified-left {
+      text-align: left !important; // nasty, but needed to override the bad specificity of the xmodule css selectors
+    }
+
+    &.cont-justified-right {
+      text-align: right !important; // nasty, but needed to override the bad specificity of the xmodule css selectors
+    }
+
+    &.cont-justified-center {
+      text-align: center !important; // nasty, but needed to override the bad specificity of the xmodule css selectorsstyles
+    }
+  }
+}
+
+th {
+  background: #eee;
+  font-weight: bold;
 }

common/static/css/tiny-mce.css

@@ -138,3 +138,15 @@ table td, th {
     text-align: left;
     font-size: 14px;
 }
+
+table td.cont-justified-left, table th.cont-justified-left {
+    text-align: left;
+}
+
+table td.cont-justified-right, table th.cont-justified-right {
+    text-align: right;
+}
+
+table td.cont-justified-center, table th.cont-justified-center {
+    text-align: center;
+}