Google 차트 테이블에서 페이징까지 너비 무시

Question

Google 차트를 사용하여 페이지 매김 된 테이블을 표시하고 있습니다.

페이지를로드 할 때 표의 너비가 매우 작고 첫 번째 페이징 후에 만 ​​적절한 너비가 으로 조정됩니다.

명시 적 너비를 설정하고 테이블 요소를 검사하려고 시도했습니다. 너비 속성이 적절한 크기로 설정되었지만로드시 테이블이 여전히 작습니다.

https://code.google.com/apis/ajax/playground/?type=visualization#table_paging

설정 한 크기로 크기를 조정하기 위해 테이블을 강제 할 수있는 방법이 있나요 : 코드에 대한 특별한 아무것도 없다

은이 놀이터의 예와 같은입니까?

감사

Answer 1

난 그냥 $ .width() 다시 폭을 설정하고있어 지금은

,

그러나이 최적의 수정은 아닌 것 같아

Answer 2

스크립트 :

<script type="text/javascript"> 
var visualization; 
var data; 

var options = {'showRowNumber': true}; 
function drawVisualization() { 
    // Create and populate the data table. 
    var dataAsJson = 
    {cols:[ 
    {id:'A',label:'Name',type:'string'}, 
    {id:'B',label:'Height',type:'number'}, 
    {id:'C',label:'Coming',type:'boolean'}, 
    {id:'D',label:'Time',type:'timeofday'}], 
    rows:[ 
    {c:[{v:'Dave'},{v:159.0,f:'159'},{v:true,f:'TRUE'},{v:[12,25,0,0],f:'12:25:00'}]}, 
    {c:[{v:'Peter'},{v:185.0,f:'185'},{v:false,f:'FALSE'},{v:[13,15,0,0],f:'13:15:00'}]}, 
    {c:[{v:'John'},{v:145.0,f:'145'},{v:true,f:'TRUE'},{v:[15,45,0,0],f:'15:45:00'}]}, 
    {c:[{v:'Moshes'},{v:198.0,f:'198'},{v:true,f:'TRUE'},{v:[16,32,0,0],f:'16:32:00'}]}, 
    {c:[{v:'Karen'},{v:169.0,f:'169'},{v:true,f:'TRUE'},{v:[19,50,0,0],f:'19:50:00'}]}, 
    {c:[{v:'Phil'},{v:169.0,f:'169'},{v:false,f:'FALSE'},{v:[18,10,0,0],f:'18:10:00'}]}, 
    {c:[{v:'Gori'},{v:159.0,f:'159'},{v:true,f:'TRUE'},{v:[13,15,0,0],f:'13:15:00'}]}, 
    {c:[{v:'Bill'},{v:155.0,f:'155'},{v:false,f:'FALSE'},{v:[7,40,48,0],f:'7:40:48'}]}, 
    {c:[{v:'Valery'},{v:199.0,f:'199'},{v:true,f:'TRUE'},{v:[6,0,0,0],f:'6:00:00'}]}, 
    {c:[{v:'Joey'},{v:187.0,f:'187'},{v:true,f:'TRUE'},{v:[5,2,24,0],f:'5:02:24'}]}, 
    {c:[{v:'Karen'},{v:190.0,f:'190'},{v:true,f:'TRUE'},{v:[6,14,24,0],f:'6:14:24'}]}, 
    {c:[{v:'Jin'},{v:169.0,f:'169'},{v:false,f:'FALSE'},{v:[5,45,36,0],f:'5:45:36'}]}, 
    {c:[{v:'Gili'},{v:178.0,f:'178'},{v:true,f:'TRUE'},{v:[6,43,12,0],f:'6:43:12'}]}, 
    {c:[{v:'Harry'},{v:172.0,f:'172'},{v:false,f:'FALSE'},{v:[6,14,24,0],f:'6:14:24'}]}, 
    {c:[{v:'Handerson'},{v:175.0,f:'175'},{v:true,f:'TRUE'},{v:[6,57,36,0],f:'6:57:36'}]}, 
    {c:[{v:'Vornoy'},{v:170.0,f:'170'},{v:true,f:'TRUE'},{v:[13,12,0,0],f:'13:12:00'}]}]}; 
    data = new google.visualization.DataTable(dataAsJson); 

    // Set paging configuration options 
    // Note: these options are changed by the UI controls in the example. 
    options['page'] = 'enable'; 
    options['pageSize'] = 10; 
    options['pagingSymbols'] = {prev: 'prev', next: 'next'}; 
    options['pagingButtonsConfiguration'] = 'auto'; 

    // Create and draw the visualization. 
    visualization = new google.visualization.Table(document.getElementById('table')); 
    draw(); 
} 

function draw() { 
    visualization.draw(data, options); 
} 


google.setOnLoadCallback(drawVisualization); 

// sets the number of pages according to the user selection. 
function setNumberOfPages(value) { 
    if (value) { 
    options['pageSize'] = parseInt(value, 10); 
    options['page'] = 'enable'; 
    } else { 
    options['pageSize'] = null; 
    options['page'] = null; 
    } 
    draw(); 
} 

// Sets custom paging symbols "Prev"/"Next" 
function setCustomPagingButtons(toSet) { 
    options['pagingSymbols'] = toSet ? {next: 'next', prev: 'prev'} : null; 
    draw(); 
} 

function setPagingButtonsConfiguration(value) { 
    options['pagingButtonsConfiguration'] = value; 
    draw(); 
} 

</script> 

html :

<div id="table" style="width:100%;"></div> 

위의 div 컨테이너에 대해 이야기하고 있습니다. 귀하의 CSS 파일에있는 경우, 테이블 요소에 대한 CSS 코드가 있습니다, 그것은 구글 생성 테이블 CSS를 재정의합니다.

맞춤 테이블 CSS 코드는 Google 표에도 영향을줍니다.

Answer 3

이 나에게 잘 작동합니다 ...

$(window).on("resize", function() { 
    draw(); 
}).resize(); 

당신은 테이블의 폭을 설정해야합니다 CSS를 통해 테이블에 100 %의 폭을주고 있었다 일

table.draw(data, { 
width:'100%', 
... 
}); 

Answer 4

유일한 해결책 :

.google-visualization-table-table{width: 100%} 

Givin 초기화시 옵션 매개 변수의 테이블 너비는 픽셀 값에서만 작동합니다. 그리고 다른 제안 된 솔루션은별로 우아하지 않게 보였습니다.