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

@@ -365,7 +365,7 @@ section.problem {
         li {
           display:inline;
           margin-left: 50px;
-          
+
           &:first-child {
             margin-left: 0px;
           }
@@ -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;
@@ -780,7 +795,7 @@ section.problem {
 
         .result-correct {
           background: url('../images/correct-icon.png') left 20px no-repeat;
-          
+
           .result-actual-output {
             color: #090;
           }
@@ -788,7 +803,7 @@ section.problem {
 
         .result-incorrect {
           background: url('../images/incorrect-icon.png') left 20px no-repeat;
-          
+
           .result-actual-output {
             color: #B00;
           }
@@ -857,7 +872,7 @@ section.problem {
 
     input[type=radio]:checked + label {
       background: #666;
-      color: white; 
+      color: white;
     }
 
     input[class='score-selection'] {

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

@@ -1,4 +1,4 @@
-// HTML component display: 
+// HTML component display:
 * {
   line-height: 1.4em;
 }
@@ -92,7 +92,7 @@ ul {
 a {
   &:link, &:visited, &:hover, &:active {
     color: #1d9dd9;
-  } 
+  }
 }
 
 img {
@@ -116,20 +116,32 @@ code {
 }
 
 table {
-  width: 100%; 
+  width: 100%;
+  margin: 20px 0;
   border-collapse: collapse;
   font-size: 16px;
+
+  td, th {
+    margin: 20px 0;
+    padding: 10px;
+    border: 1px solid #ccc;
+    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; 
+th {
+  background: #eee;
+  font-weight: bold;
 }
-
-table td, th { 
-  margin: 20px 0;
-  padding: 10px; 
-  border: 1px solid #ccc; 
-  text-align: left;
-  font-size: 14px;
-}

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