Vertical scrollbar for customizing table in google chart - google-visualization

Question

I am customizing table in google chart. All i need is fixing the header and footer of table and enabling an vertical scrollbar in the remaining rows of table.
Following is the code i have tried to use..
Please help me..Thanks in advance
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<div style="width:1300px;" id="table"></div>
<script type="text/javascript">
var parent = document.getElementById("table");
google.load('visualization', '1', { packages: ['table'] });
function initialize() {
drawTable();
}
google.setOnLoadCallback(initialize);
function drawTable() {
var cssClassNames = {headerRow: 'bigAndBoldClass',selectedTableRow :'scrollClass'};
var options = {'showRowNumber': false, 'allowHtml': true, 'cssClassNames': cssClassNames, 'alternatingRowStyle': false,'height':300};
var data = new google.visualization.DataTable();
data.addColumn('string', 'Carrier');
data.addColumn('number', 'Chargeable Weight (Kg)');
data.addColumn('number', 'Spending (USD)');
data.addColumn('number', 'Transactions');
data.addRows(12);
data.setCell(0, 0, '112-CK - China Cargo Airlines Ltd. ');
data.setCell(0, 1, 10000, '1 9455.00');
data.setCell(0, 2, 10000, '5 8,982.25');
data.setCell(0, 3, 10000, '1');
data.setCell(1, 0, '607-EY - Etihad Airways ');
data.setCell(1, 1, 10000, '2 4081.00');
data.setCell(1, 2, 10000, '5 17,964.76');
data.setCell(1, 3, 10000, '4');
data.setCell(2, 0, '695-BR - EVA Airways Corporation. ');
data.setCell(2, 1, 10000, '3 1898.00');
data.setCell(2, 2, 10000, '56,681.50');
data.setCell(2, 3, 10000, '4');
data.setCell(3, 0, '172-CV - Cargolux Airlines International S.A ');
data.setCell(3, 1, 10000, '4 1361.00');
data.setCell(3, 2, 10000, '53,754.50');
data.setCell(3, 3, 10000, '2');
data.setCell(4, 0, '125-BA - British Airways P.I.C ');
data.setCell(4, 1, 10000, '5 1343.00');
data.setCell(4, 2, 10000, '57,483.45');
data.setCell(4, 3, 10000, '8');
data.setCell(5, 0, '999-CA - Air China Cargo ');
data.setCell(5, 1, 10000, '6 1225.00');
data.setCell(5, 2, 10000, '54,900.00');
data.setCell(5, 3, 10000, '1');
data.setCell(6, 0, '176-EK - Emirates Airlines ');
data.setCell(6, 1, 10000, '7 1108.00');
data.setCell(6, 2, 10000, '56,658.79');
data.setCell(6, 3, 10000, '8');
data.setCell(7, 0, '406-5X - UPS ');
data.setCell(7, 1, 10000, '8 724.00');
data.setCell(7, 2, 10000, '53,982.00');
data.setCell(7, 3, 10000, '1');
data.setCell(8, 0, '297-CI - China Airlines ');
data.setCell(8, 1, 10000, '9 521.08');
data.setCell(8, 2, 10000, '53,222.64');
data.setCell(8, 3, 10000, '4');
data.setCell(9, 0, '307-WE - Centurion Air Cargo, Inc ');
data.setCell(9, 1, 10000, '10 436.00');
data.setCell(9, 2, 10000, '52,045.00');
data.setCell(9, 3, 10000, '2');
data.setCell(10, 0, '160-CX - Cathay Pacific ');
data.setCell(10, 1, 10000, '11 270.00');
data.setCell(10, 2, 10000, '51,876.50');
data.setCell(10, 3, 10000, '1');
data.setCell(11, 0, '<span class="grand-total"> Grand Total</span>');
data.setCell(11, 1, 10000, '<span class="grand-total">104005.00 Kg</span>');
data.setCell(11, 2, 10000, '<span class="grand-total">USD 72,699.94</span>');
data.setCell(11, 3, 10000, '<span class="grand-total">45</span>');
var container = document.getElementById('table');
var table = new google.visualization.Table(container);
table.draw(data, options);
table.setSelection([{'row': 4}]);
}
</script>