Fix: Possible column misalignment when scrolling is enabled

- This is caused due to different content in the displayed header and
  the size forcing header in the body scrolling table. The browsers can
  lay the two tables out differently even although the widths applied
  are identical, due to the different content.

- The fix is to keep the content in the scroll body header, but hide it
  by wrapping in a div which has height 0 and overflow hidden

- See thread 19311 for more information

.datatables-commit-sync

@@ -1 +1 @@
-a931f2b4aeb3f699cbda26245bdc590079044eed
+0bad6ae070822c2ed55a47610f7f6262926353d5

media/css/jquery.dataTables.css

@@ -354,6 +354,13 @@ table.dataTable td {
   *margin-top: -1px;
   -webkit-overflow-scrolling: touch;
 }
+.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody th > div.dataTables_sizing,
+.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody td > div.dataTables_sizing {
+  height: 0;
+  overflow: hidden;
+  margin: 0 !important;
+  padding: 0 !important;
+}
 .dataTables_wrapper.no-footer .dataTables_scrollBody {
   border-bottom: 1px solid #111111;
 }

media/js/jquery.dataTables.js

@@ -3504,6 +3504,7 @@
 			headerSrcEls, footerSrcEls,
 			headerCopy, footerCopy,
 			headerWidths=[], footerWidths=[],
+			headerContent=[],
 			idx, correction, sanityWidth,
 			zeroOut = function(nSizer) {
 				var style = nSizer.style;
@@ -3614,6 +3615,7 @@
 	
 		// Read all widths in next pass
 		_fnApplyToChildren( function(nSizer) {
+			headerContent.push( nSizer.innerHTML );
 			headerWidths.push( _fnStringToCss( $(nSizer).css('width') ) );
 		}, headerSrcEls );
 	
@@ -3645,10 +3647,12 @@
 		 * 3. Apply the measurements
 		 */
 	
-		// "Hide" the header and footer that we used for the sizing. We want to also fix their width
-		// to what they currently are
+		// "Hide" the header and footer that we used for the sizing. We need to keep
+		// the content of the cell so that the width applied to the header and body
+		// both match, but we want to hide it completely. We want to also fix their
+		// width to what they currently are
 		_fnApplyToChildren( function(nSizer, i) {
-			nSizer.innerHTML = "";
+			nSizer.innerHTML = '<div class="dataTables_sizing" style="height:0;overflow:hidden;">'+headerContent[i]+'</div>';
 			nSizer.style.width = headerWidths[i];
 		}, headerSrcEls );