You can do it with a combination of JavaScript and CSS.
Add something like this script to the question source:
Code:
<script type="text/javascript" charset="utf-8">
$(document).on('ready pjax:scriptcomplete',function(){
// Identify this question
var thisQuestion = $('#question{QID}');
// Add a question class
thisQuestion.addClass('custom-array');
// Column-specific classes
$('table.subquestion-list tr', thisQuestion).each(function(i) {
$('th, td', this).each(function(i) {
$(this).addClass('column-'+i);
});
});
// Listener on the radios
$('input:radio', thisQuestion).on('click', function(i) {
$(this).closest('tr').find('.active-item').removeClass('active-item');
$(this).closest('td').addClass('active-item');
});
});
</script>
Add some CSS rules like this to the question source (or custom.css file):
Code:
<style type="text/css">
.custom-array table.subquestion-list thead td,
.custom-array table.subquestion-list thead th {
border-bottom-width: 8px;
border-bottom-style: solid;
}
.custom-array table.subquestion-list thead .column-1 { border-bottom-color: #00A800; }
.custom-array table.subquestion-list thead .column-2 { border-bottom-color: #5AC100; }
.custom-array table.subquestion-list thead .column-3 { border-bottom-color: #9DD600; }
.custom-array table.subquestion-list thead .column-4 { border-bottom-color: #9CE400; }
.custom-array table.subquestion-list thead .column-5 { border-bottom-color: #E2EC00; }
.custom-array table.subquestion-list thead .column-6 { border-bottom-color: #ECEC00; }
.custom-array table.subquestion-list thead .column-7 { border-bottom-color: #ECE200; }
.custom-array table.subquestion-list thead .column-8 { border-bottom-color: #E4C900; }
.custom-array table.subquestion-list thead .column-9 { border-bottom-color: #D69D00; }
.custom-array table.subquestion-list thead .column-10 { border-bottom-color: #C15A00; }
.custom-array table.subquestion-list thead .column-11 { border-bottom-color: #A80200; }
.custom-array td.column-1:hover,
.custom-array td.active-item.column-1 { background-color: #00A800; }
.custom-array td.column-2:hover,
.custom-array td.active-item.column-2 { background-color: #5AC100; }
.custom-array td.column-3:hover,
.custom-array td.active-item.column-3 { background-color: #9DD600; }
.custom-array td.column-4:hover,
.custom-array td.active-item.column-4 { background-color: #9CE400; }
.custom-array td.column-5:hover,
.custom-array td.active-item.column-5 { background-color: #E2EC00; }
.custom-array td.column-6:hover,
.custom-array td.active-item.column-6 { background-color: #ECEC00; }
.custom-array td.column-7:hover,
.custom-array td.active-item.column-7 { background-color: #ECE200; }
.custom-array td.column-8:hover,
.custom-array td.active-item.column-8 { background-color: #E4C900; }
.custom-array td.column-9:hover,
.custom-array td.active-item.column-9 { background-color: #D69D00; }
.custom-array td.column-10:hover,
.custom-array td.active-item.column-10 { background-color: #C15A00; }
.custom-array td.column-11:hover,
.custom-array td.active-item.column-11 { background-color: #A80200; }
</style>
Sample survey attached:
) 
