OO-4339: CSS classes for responsive tables

src/main/webapp/static/themes/light/modules/_content_embedded.scss

 /* content styles that can be embedded in content iframe but also appear inline, e.g. in a forum post */
 
-/* The content block is a wrapper added to inline content which is generated by the user. 
-   It is treated as "content" in contrast to other elements which are "application" elements. 
-   Use this block to override application styles 
+/* The content block is a wrapper added to inline content which is generated by the user.
+   It is treated as "content" in contrast to other elements which are "application" elements.
+   Use this block to override application styles
 */
 .o_user_content_block {
 	/* In some cases links in content area don't have same color as in app */
@@ -18,38 +18,38 @@
 }
 
 /* content boxes */
-.b_info, p.b_info, div.b_info{ 
+.b_info, p.b_info, div.b_info{
 	@extend %o_info;
 }
 
-.b_note, p.b_note, div.b_note { 
+.b_note, p.b_note, div.b_note {
 	@extend %o_note;
 }
 
-.b_important, p.b_important, div.b_important { 
+.b_important, p.b_important, div.b_important {
 	@extend %o_important;
 }
 
-.b_success, p.b_success, div.b_success { 
+.b_success, p.b_success, div.b_success {
 	@extend %o_success;
 }
 
-.b_warning, p.b_warning, div.b_warning { 
+.b_warning, p.b_warning, div.b_warning {
 	@extend %o_warning;
 }
 
-.b_error, p.b_error, div.b_error { 
+.b_error, p.b_error, div.b_error {
 	@extend %o_error;
 }
 
-.b_border_box, p.b_border_box, div.b_border_box { 
-	border: 1px solid $o-content-border-box-border; 
+.b_border_box, p.b_border_box, div.b_border_box {
+	border: 1px solid $o-content-border-box-border;
 	padding: $o-content-border-box-padding;
-	@include border-top-radius($o-content-border-box-radius); 
-	@include border-bottom-radius($o-content-border-box-radius); 
+	@include border-top-radius($o-content-border-box-radius);
+	@include border-bottom-radius($o-content-border-box-radius);
 }
 
-.b_copy_code, p.b_copy_code, div.b_copy_code, code { 
+.b_copy_code, p.b_copy_code, div.b_copy_code, code {
 	@extend %o_copy_code;
 	@extend %o_nowrap;
 }
@@ -57,13 +57,13 @@ pre {
 	@extend %o_copy_code;
 }
 
-div.b_scrollblock { 
+div.b_scrollblock {
 	@extend %o_scrollblock;
 }
 
 @mixin o-make-colored-table($bgcolor){
 	border-collapse: collapse;
-	td, th { 
+	td, th {
 		padding: $table-cell-padding;
 		background: $bgcolor;
 		border: 1px solid lighten($bgcolor,5%);
@@ -71,7 +71,7 @@ div.b_scrollblock {
 	thead td, th {
 		background: darken($bgcolor,10%);
 		font-weight: bold;
-	}	
+	}
 	tbody tr:nth-child(even) td {
 		background: lighten($bgcolor,5%);
 		border: 1px solid $bgcolor;
@@ -80,9 +80,9 @@ div.b_scrollblock {
 		background: $bgcolor;
 		border: 1px solid lighten($bgcolor,5%);
 	}
-	
+
 	@media print {
-		td, th { 
+		td, th {
 			-webkit-print-color-adjust: exact;
 			color-adjust: exact;
 			background: $bgcolor !important;
@@ -91,11 +91,11 @@ div.b_scrollblock {
 			-webkit-print-color-adjust: exact;
 			color-adjust: exact;
 			background: darken($bgcolor,10%) !important;
-		}	
+		}
 		tbody tr:nth-child(even) td {
 			-webkit-print-color-adjust: exact;
 			color-adjust: exact;
-			background: lighten($bgcolor,5%)  !important;		
+			background: lighten($bgcolor,5%)  !important;
 		}
 	}
 }
@@ -104,116 +104,127 @@ div.b_scrollblock {
 table {
 	td {
         line-height: $line-height-base;
-		vertical-align: top;	
+		vertical-align: top;
 	}
-	
+
 	&.b_default {
-		td, th { 
+		td, th {
 			padding: $table-cell-padding;
-	        vertical-align: top;		
+	        vertical-align: top;
 	    }
 	}
 	&.b_grid {
-		width: 99.5%; 
+		width: 99.5%;
 		background: transparent;
 		border-collapse: separate;
-		td, th { 	
+		td, th {
 			padding: $table-cell-padding;
 			border: 1px solid $o-content-table-border;
 		}
 		thead td, th {
 			background: $gray-lighter;
 			font-weight: bold;
-		}	
+		}
 	}
 	&.b_border {
-		width: 99.5%; 
+		width: 99.5%;
 		background: transparent;
 		border-collapse: collapse;
-		td, th { 
+		td, th {
 			padding: $table-cell-padding;
 			border: 1px solid $o-content-table-border;
-		}	
+		}
 		thead td, th {
 			background: $gray-lighter;
 			font-weight: bold;
-		}	
+		}
 	}
 	&.b_borderless {
-		width: 99.5%; 
+		width: 99.5%;
 		background: transparent;
 		border-collapse: separate;
-		td, th { 
+		td, th {
 			padding: $table-cell-padding;
 			border: 0 !important;
 		}
-		thead td, th { 
+		thead td, th {
 			font-weight: bold;
 		}
 	}
-	&.b_full { 
-		width: 99.5%; 
+	&.b_full {
+		width: 99.5%;
 	}
 	&.b_middle {
 		background: transparent;
 		td {
-			vertical-align: middle;			
-		}	
+			vertical-align: middle;
+		}
 	}
-	&.b_gray { 
+	&.b_gray {
 		@include o-make-colored-table($o-box-info-bg);
 	}
-	&.b_blue { 
+	&.b_blue {
 		@include o-make-colored-table($o-box-note-bg);
 	}
-	&.b_green { 
+	&.b_green {
 		@include o-make-colored-table($o-box-success-bg);
 	}
-	&.b_yellow { 
+	&.b_yellow {
 		@include o-make-colored-table($o-box-warning-bg);
 	}
-	&.b_red { 
+	&.b_red {
 		@include o-make-colored-table($o-box-error-bg);
 	}
 }
 
+table.a_responsive{
+  width: auto !important;
+}
+
+
+@media (max-width: 768px) {
+    .a_responsive td {
+       display: block;
+    }
+}
+
 /* font styles  */
-.b_selected, p.b_selected, div.b_selected { 
+.b_selected, p.b_selected, div.b_selected {
 	@extend %o_selected;
-}	
-.b_dimmed, p.b_dimmed, div.b_dimmed { 
+}
+.b_dimmed, p.b_dimmed, div.b_dimmed {
 	@extend %o_dimmed;
 }
-.b_disabled, p.b_disabled, div.b_disabled { 
+.b_disabled, p.b_disabled, div.b_disabled {
 	@extend %o_disabled;
 }
-.b_deleted, p.b_deleted, div.b_deleted { 
+.b_deleted, p.b_deleted, div.b_deleted {
 	@extend %o_deleted;
-}	
+}
 
 /* font sizes relative to parent object */
-.b_xsmall, p.b_xsmall, div.b_xsmall { 
+.b_xsmall, p.b_xsmall, div.b_xsmall {
 	@extend %o_xsmall;
 }
-.b_small, p.b_small, div.b_small { 
+.b_small, p.b_small, div.b_small {
 	@extend %o_small;
 }
-.b_large, p.b_large, div.b_large { 
+.b_large, p.b_large, div.b_large {
 	@extend %o_large;
 }
-.b_xlarge, p.b_xlarge, div.b_xlarge  { 
+.b_xlarge, p.b_xlarge, div.b_xlarge  {
 	@extend %o_xlarge;
 }
 
 /* text alignment: normal flow in a LTR language is left, in a RTL language it is right */
-.b_align_normal { 
-	text-align: left; 
+.b_align_normal {
+	text-align: left;
 }
-.b_align_center { 
-	text-align: center; 
+.b_align_center {
+	text-align: center;
 }
-.b_align_inverse { 
-	text-align: right; 
+.b_align_inverse {
+	text-align: right;
 }
 .b_align_justified {
 	text-align:justify
@@ -222,28 +233,28 @@ table {
 /* special links */
 a.b_link_extern {
 	color: $o-content-link-color; /* need seomething for tiny */
-	&:before { 
-		@include o-make-icon(); 
+	&:before {
+		@include o-make-icon();
 		padding-right: 0.5em;
 		content: $fa-var-external-link;
 	}
 }
-a.b_link_mailto { 
+a.b_link_mailto {
 	color: $o-content-link-color; /* need seomething for tiny */
-	&:before { 
-		@include o-make-icon(); 
+	&:before {
+		@include o-make-icon();
 		padding-right: 0.5em;
 		content: $fa-var-envelope-o;
-		
+
 	}
 }
-a.b_link_forward { 
+a.b_link_forward {
 	color: $o-content-link-color; /* need seomething for tiny */
-	&:before { 
-		@include o-make-icon(); 
+	&:before {
+		@include o-make-icon();
 		padding-right: 0.5em;
 		content: $fa-var-share ;
-		
+
 	}
 }
 
@@ -251,9 +262,9 @@ a.b_link_forward {
 img {
 	/* responsive fixes */
 	@extend %o_image;
-} 
+}
 img.b_float_left {
-	float: left; 
+	float: left;
 	margin: 0 2em 2em 0;
 }
 img.b_float_left_clear {
@@ -262,41 +273,41 @@ img.b_float_left_clear {
 	display: block;
 }
 img.b_float_right {
-	float: right; 
+	float: right;
 	margin: 0 0 2em 2em;
 }
-img.b_float_right_clear { 
+img.b_float_right_clear {
 	clear: both;
-	display: block; 
+	display: block;
 	margin: 0 0 2em auto;
 }
 img.b_float_left_clear_nomargin {
-	float: left; 
-	display: block; 
+	float: left;
+	display: block;
 	margin: 0 0 0 0;
 }
 img.b_centered {
 	clear: both;
-	display: block; 
+	display: block;
 	margin: 0 auto 2em auto;
 }
 img.b_circle {
 	border-radius: 50%;
 }
 img.b_with_border {
-	border: 1px solid $o-content-border-img-border; 
+	border: 1px solid $o-content-border-img-border;
 	padding: $o-content-border-img-padding;
-	@include border-top-radius($o-content-border-img-radius); 
-	@include border-bottom-radius($o-content-border-img-radius); 
+	@include border-top-radius($o-content-border-img-radius);
+	@include border-bottom-radius($o-content-border-img-radius);
 }
 .b_image {
 	/* responsive fixes */
 	@extend %o_image;
-} 
+}
 .b_video {
 	/* responsive fixes */
 	@extend %o_video;
-} 
+}
 
 /* headers and captions for images or tables */
 p.b_figure_title {
@@ -312,19 +323,19 @@ p.b_figure_caption {
 
 
 /* Captions for table and figures */
-caption, 
+caption,
 figcaption,
 .o_caption {
   	padding-top: $table-cell-padding;
   	padding-bottom: $table-cell-padding;
   	color: $text-muted;
-  	text-align: left;	
+  	text-align: left;
 	font-style: italic;
 }
 
 
 /* float clear classes */
-.b_clear_float, p.b_clear_float, div.b_clear_float { 
+.b_clear_float, p.b_clear_float, div.b_clear_float {
 	clear: both;
 }
 
@@ -334,4 +345,3 @@ figcaption,
 
 /* tinymce specific css classes for alignment, figures etc.*/
 @import "tinymce";
-