データテーブルの行の開始と終了のグループ化

Question

私は以下の機能を試しました。グループ化ヘッダーとフッターのCSSスタイルを追加するにはどうすればよいですか？フッターの場合はおそらく可能ですが、ヘッダのためにどうすればいいですか？

$(document).ready(function() { 
    $('#example').DataTable({ 
     order: [[2, 'asc']], 
     rowGroup: {    
      endRender: function (rows, group) { 
       var salaryAvg = rows 
        .data() 
        .pluck(5) 
        .reduce(function (a, b) { 
         return a + b.replace(/[^\d]/g, '')*1; 
        }, 0)/rows.count(); 
       salaryAvg = $.fn.dataTable.render.number(',', '.', 0, '$').display(salaryAvg); 

       var ageAvg = rows 
        .data() 
        .pluck(3) 
        .reduce(function (a, b) { 
         return a + b*1; 
        }, 0)/rows.count(); 

       return $('<tr/>') 
        .append('<td colspan="3">Averages for '+group+'</td>') 
        .append('<td>'+ageAvg.toFixed(0)+'</td>') 
        .append('<td/>') 
        .append('<td>'+salaryAvg+'</td>'); 
      }, 
      dataSrc: 2 
     } 
    }); 
}); 

Answer 1

ちょうどCSS

tr.group{ 
    background-color: #690505 !important; 
    color: white !important; 
} 

tr.group:hover { 
    background-color: #871818 !important; 
    color: white !important; 
} 

Answer 2

table.dataTable tr.group td{ 
    font-weight:bold; 
    background-color:#e0e0e0 
}