<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
        // If you want to use the hovering
        $('input:radio', thisQuestion).on('click', function(i) {
            $(this).closest('tr').find('.active-item').removeClass('active-item');
            $(this).closest('td').addClass('active-item');
        });        
    });
</script>

<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 col {
       width: auto !important;
   }  
 
    .custom-array table.subquestion-list thead .column-1 { border-bottom-color: #00A800; width: 23%; }
    .custom-array table.subquestion-list thead .column-2 { border-bottom-color: #5AC100; width: 6%; }
    .custom-array table.subquestion-list thead .column-3 { border-bottom-color: #9DD600; width: 6%; }
    .custom-array table.subquestion-list thead .column-4 { border-bottom-color: #9CE400; width: 6%; }
    .custom-array table.subquestion-list thead .column-5 { border-bottom-color: #E2EC00; width: 6%; }
    .custom-array table.subquestion-list thead .column-6 { border-bottom-color: #ECEC00; width: 6%; }
    .custom-array table.subquestion-list thead .column-7 { border-bottom-color: #ECE200; width: 6%; }
    .custom-array table.subquestion-list thead .column-8 { border-bottom-color: #E4C900; width: 6%; }
    .custom-array table.subquestion-list thead .column-9 { border-bottom-color: #D69D00; width: 6%; }
    .custom-array table.subquestion-list thead .column-10 { border-bottom-color: #C15A00; width: 6%; }
    .custom-array table.subquestion-list thead .column-11 { border-bottom-color: #A80200; width: 23%; }

  
    .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>