adjust scroll-bar for Google Chart table - google-visualization

Question

the vertical scroll-bar on my table hovers over my data. I cannot seem to move the vertical scroll-bar nor can I change the width of the table. I even tried left aligning the text on my 2nd column but nothing happens.
This is my table:
I have to scroll across to see all my data:
Is there a way to see the full width of my table and not have the vertical scroll bar hover over my 2nd column?
this is the code:
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1.1", { packages: ["table"] });
google.setOnLoadCallback(drawTable);
function drawTable() {
var data = google.visualization.arrayToDataTable([
['Researcher Name', 'Number of Submissions'],
#Html.Raw(rows)]);
var options = {
title: ''
};
var dashboard = new google.visualization.Dashboard(document.querySelector('#dashboard'));
var stringFilter = new google.visualization.ControlWrapper({
controlType: 'StringFilter',
containerId: 'string_filter_div',
options: {
filterColumnIndex: 0
}
});
var table = new google.visualization.ChartWrapper({
chartType: 'Table',
containerId: 'table_div',
options: {
showRowNumber: false
}
});
dashboard.bind([stringFilter], [table]);
dashboard.draw(data);
}
google.load('visualization', '1', { packages: ['controls'], callback: drawTable });
</script>
<div id="dashboard">
<div id="string_filter_div"></div>
<div style="height:450px" id="table_div"></div>
</div>

Answer 1

I was getting exactly the same problem as you and ended up solving it by adding paging options to the table. Now I never get a vertical scroll bar.
page: 'enable',
pageSize: 27

Answer 2

The table chart usually does a good job with just the defaults.
Try removing style="height:450px" from your div.
To get the table headings to wrap, you can assign a css class name to headerCell, it can be blank.
cssClassNames: {headerCell: 'googleHeaderCell'}
Add this css class somewhere on your page...
.googleHeaderCell {}
Otherwise, you should be able to set a distinct height and width, directly in your options. Just remember to remove it from the div, as mentioned previously. Unless other content on the page is crowding the table...
options = {
cssClassNames: {headerCell: 'googleHeaderCell'}, // be sure to add css
height: 600, // no px needed
width: 800
};

Answer 3

For the width of the table, you can assign width either in the div itself or in the table option like:
options = {
width: 800
};
always try to keep the height:auto in the div section, so that height of the table can get the default table content. If you are getting overflow in the scrollbar and try to get rid of it, you can use a CSS
divElement(id/class){
overflow:hidden;// for both horizontal and vertical scrolls
or
overflow-x:hidden;// for horizontal scroll
or
overflow-y:hidden;// for vertical scroll
}
To keep the text left or right aligned inside the table cell you can use CSS in the table option itself:
.align-text{ //class name
text-align:left/right;}
var cssClass= {
'tableCell': 'align-text',
};
/**** table option ****/
options = {
cssClassNames: cssClass,
width: 800};