Question

我桌子上的垂直滚动条悬停在我的数据上。我似乎无法移动垂直滚动条，也无法更改表格的宽度。我甚至尝试在第二列上左对齐文本，但没有任何反应。

这是我的表：

我必须滚动查看我的所有数据：

有没有办法看到我的桌子的整个宽度而没有将垂直滚动条悬停在我的第二列上？

这是代码：

<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

我遇到了与您完全相同的问题，最后通过向表中添加分页选项来解决问题。现在我从来没有得到垂直滚动条。

页面：＆＃39;启用＆＃39;， pageSize：27

Answer 2

表格通常只有默认值才能很好地完成。

尝试从style="height:450px"中删除div。

要将表格标题设为换行，您可以将css类名称指定给headerCell，它可以为空白。

cssClassNames: {headerCell: 'googleHeaderCell'}

在页面的某处添加此css类...

.googleHeaderCell {}

否则，您应该可以直接在height中设置不同的width和options。如前所述，只需记住将其从div 中删除即可。除非页面上的其他内容挤在桌面上......

options = {
    cssClassNames: {headerCell: 'googleHeaderCell'},  // be sure to add css
    height: 600,  // no px needed
    width: 800
};

Answer 3

对于表格的宽度，您可以在div本身或表格选项中指定宽度，如：

options = {
width: 800

};

总是尝试在div部分保持高度：auto，这样表的高度就可以获得默认的表格内容。如果你在滚动条中溢出并试图摆脱它，你可以使用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 }

要使文本在表格单元格内左右对齐，您可以在表格选项中使用CSS：

.align-text{    //class name

text-align:left/right;}

var cssClass= { 
'tableCell': 'align-text',
};

/ ****表格选项**** /

options = { cssClassNames: cssClass, width: 800};

调整Google Chart表格的滚动条

3 个答案: