調整Google Chart表格的滾動條

我桌子上的垂直滾動條懸停在我的數據上。我似乎無法移動垂直滾動條，也無法更改表格的寬度。我甚至嘗試將我的第二列的文字對齊，但沒有任何反應。調整Google Chart表格的滾動條

這是我的表：

我必須跨越滾動才能看到我的所有數據：

有沒有辦法看到我的表的整個寬度並沒有垂直滾動條懸停在我的第二列？

這是代碼：

<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>

來源

2015-10-01 Kivan Ilangakoon

表圖表通常做得很好，只用默認值。

嘗試從div中刪除style="height:450px"。

要將表格標題改爲換行，您可以將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 
};

來源

2015-10-01 16:36:38 WhiteHat

我得到完全相同的問題，因爲你，並最終通過添加分頁選項表中解決它。現在我從來沒有得到一個垂直滾動條。

頁： '啓用'，每頁：27

來源

2015-10-29 11:20:39 ChromaticRanger

對於表格的寬度，你可以在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};

來源

2017-11-29 21:44:33

代碼塊有點亂，考慮用ctrl-k代替反引號來創建它們。 –

調整Google Chart表格的滾動條

回答

相關問題