<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$('input[name="{SGQ}SQ001_X002"]').replaceWith('<textarea id="{SGQ}SQ001_X002" name="{SGQ}SQ001_X002" rows="5" cols="25"></textarea>');
$('input[name="{SGQ}SQ002_X002"]').replaceWith('<textarea id="{SGQ}SQ002_X002" name="{SGQ}SQ002_X002" rows="5" cols="25"></textarea>');
$('input[name="{SGQ}SQ003_X002"]').replaceWith('<textarea id="{SGQ}SQ003_X002" name="{SGQ}SQ003_X002" rows="5" cols="25"></textarea>');
$('input[name="{SGQ}SQ004_X002"]').replaceWith('<textarea id="{SGQ}SQ004_X002" name="{SGQ}SQ004_X002" rows="5" cols="25"></textarea>');
 
}); 
</script>

<style>
    .table > tbody > tr > th {    vertical-align: top;}
</style>

<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);
      });
    });
    });
</script>

<style type="text/css">.custom-array table.subquestion-list col {
    width: auto !important;
  }
 
  .custom-array table.subquestion-list thead .column-0 {  width: 25%; } 
  .custom-array table.subquestion-list thead .column-1 {  width: 10%; }
  .custom-array table.subquestion-list thead .column-2 {  width: 50%; }
  .custom-array table.subquestion-list thead .column-3 {  width: 15%; }
</style>