Index: lams_tool_scratchie/web/pages/monitoring/studentChoices.jsp
===================================================================
diff -u -rdca131e6c31f20fd0173cd912bd8edf0213f9d33 -r0fa10aad87c08838d586940681590efeccb5e077
--- lams_tool_scratchie/web/pages/monitoring/studentChoices.jsp	(.../studentChoices.jsp)	(revision dca131e6c31f20fd0173cd912bd8edf0213f9d33)
+++ lams_tool_scratchie/web/pages/monitoring/studentChoices.jsp	(.../studentChoices.jsp)	(revision 0fa10aad87c08838d586940681590efeccb5e077)
@@ -15,44 +15,16 @@
 	body {
 	    -webkit-overflow-scrolling: touch;
 	}
-
-	#questions-header-sticky {
-		display: none;
-		position: sticky;
-		top: 0;
-		z-index: 1;
-	    background: #FFF;
-	}
 	
-	#questions-header-sticky.stick {
-		display: table;
-	}
-	
-	/* Use strick column widths so sticky and standard header look the same. */
-	#questions-header-sticky thead th:first-child,
-	#questions-data thead th:first-child {
-		min-width: 17rem;
-		max-width: 17rem;
-		width: 17rem;
-	}
-	
-	.question-header-cell {
-		min-width: 10rem;
-		max-width: 10rem;
-		width: 10rem;
-	}
-	
-	.question-header-summary-cell {
-		min-width: 7rem;
-		max-width: 7rem;
-		width: 7rem;
-	}
-	
 	#questions-data {
 	  position: relative;
 	  background: #FFF;
 	}
 	
+	#questions-data thead {
+		background: #FFF;
+	}
+	
 	#questions-data tbody th {
 	  position: -webkit-sticky; /* for Safari */
 	  position: sticky;
@@ -85,18 +57,22 @@
 		$('#time-limit-panel-placeholder').load('${timeLimitPanelUrl}');
 
 
-		<c:if test="${fn:length(sessionDtos) > 10}">
+		<c:if test="${fn:length(sessionDtos) > 0}">
 			// Add sticky column headers to student choices table.
 			// Standard sticky header CSS solution does not work as it is page which is being scrolled, not the table itself
-			let studentChoicesTable = $('#questions-data'),
-				studentChoicesStickyHeader = $('#questions-header-sticky');
 	
 			window.onscroll = function() {
-				let studentChoicesTableTopOffset = studentChoicesTable.offset().top,
+				let studentChoicesTable = $('#questions-data'),
+					studentChoicesStickyHeader = $('thead', studentChoicesTable),
+					studentChoicesTableTopOffset = studentChoicesTable.offset().top,
 					studentChoicesTableHeight = studentChoicesTable.height();
-				studentChoicesStickyHeader.toggleClass("stick",
-					window.pageYOffset > studentChoicesTableTopOffset + 20 
-						&& window.pageYOffset < studentChoicesTableTopOffset + studentChoicesTableHeight);
+				if (window.pageYOffset > studentChoicesTableTopOffset + 20 
+						&& window.pageYOffset < studentChoicesTableTopOffset + studentChoicesTableHeight - 20) {
+					studentChoicesStickyHeader
+						.css('transform', 'translateY(' + (window.pageYOffset - studentChoicesTableTopOffset - 2) + 'px)');
+				} else {
+					studentChoicesStickyHeader.css('transform', 'none');
+				}
 			}
 		</c:if>
 	});
@@ -159,57 +135,29 @@
 	<!-- End notifications -->
 </c:if>
 
-<c:if test="${fn:length(sessionDtos) > 10}">
-	<table id="questions-header-sticky" class="table table-bordered table-condensed">
-		<thead>
-			<tr role="row">
-			
-				<th></th>
-				<c:forEach var="item" items="${items}" varStatus="i">
-					<th class="text-center question-header-cell">
-						<a data-toggle="modal" href="#question${i.index}Modal">
-							<fmt:message key="label.authoring.basic.question.text"/> ${i.index + 1}
-						</a>
-					</th>
-				</c:forEach>
-				
-				<c:if test="${not empty sessionDtos}">
-					<th class="text-center question-header-summary-cell">
-						<fmt:message key="label.total"/>&nbsp;
-						<i class="fa fa-question-circle text-primary" data-toggle="tooltip" data-placement="top" data-container="body" 
-						   title="<fmt:message key="label.total.1st.attempt.by.team"/>"></i>
-					</th>
-					<th class="text-center question-header-summary-cell">
-						<fmt:message key="label.total"/> %
-					</th>
-				</c:if>
-			</tr>
-		</thead>
-	</table>
-</c:if>
 	
 <!-- Table --> 
-<div id="questions-data-container">
+<div id="questions-data-container" class="table-responsive">
 	<table id="questions-data" class="table table-striped table-bordered table-hover table-condensed">
 		<thead>
 			<tr role="row">
 			
 				<th></th>
 				<c:forEach var="item" items="${items}" varStatus="i">
-					<th class="text-center question-header-cell">
+					<th class="text-center">
 						<a data-toggle="modal" href="#question${i.index}Modal">
 							<fmt:message key="label.authoring.basic.question.text"/> ${i.index + 1}
 						</a>
 					</th>
 				</c:forEach>
 				
 				<c:if test="${not empty sessionDtos}">
-					<th class="text-center question-header-summary-cell">
+					<th class="text-center">
 						<fmt:message key="label.total"/>&nbsp;
 						<i class="fa fa-question-circle text-primary" data-toggle="tooltip" data-placement="top" data-container="body" 
 						   title="<fmt:message key="label.total.1st.attempt.by.team"/>"></i>
 					</th>
-					<th class="text-center question-header-summary-cell">
+					<th class="text-center">
 						<fmt:message key="label.total"/> %
 					</th>
 				</c:if>