各列に特定の幅を設定する方法

Question

<script src="http://www.google.com/jsapi" type="text/javascript"></script> 
<script type="text/javascript"> 
    google.load('visualization', '1', { packages: ['table'] }); 
</script> 
<script type="text/javascript"> 
    var visualization; 
    function drawVisualization() { 

     var query = new google.visualization.Query(
     'https://docs.google.com/spreadsheets/d/18KqoG0VT8c5eaT6IdSzczRPXJX4-CPFfBeImv07n5NA/edit#gid=1324681333'); 

     query.setQuery('SELECT B, C, D, E, F, H, I, G '); 
     query.send(handleQueryResponse); 
    } 

    function handleQueryResponse(response) { 
     if (response.isError()) { 
      alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage()); 
      return; 
     } 

     var data = response.getDataTable(); 

     visualization = new google.visualization.Table(document.getElementById('table')); 
     visualization.draw(data, { legend: 'bottom' }); 
    } 
    google.setOnLoadCallback(drawVisualization); 
</script> 
<br /> 
<div id="table"> 
</div> 

私の英語は良くなく、私はプログラマーではありません。私はちょうどB、C、D、E、F、H、私は、Gの列を別にサイズを設定します。ありがとうございました。私はサイトのルールに反していないことを願っています。

Answer 1

重複として参照されている質問に受け入れられた回答は機能していません。
答えのようにすべての行と最初の行に適用した場合でも。

DataViewを使用して、各列にhtml divを挿入することができます。
widthディメンションにcssを含め、調整する各列にクラス名を割り当てます。

グーグルチャートと古いライブラリjsapiを読み込む場合はloader.jsを使用することをおすすめします。

はい、私は、各列（少なくとも2またはそれらの3）のための特定の幅を設定したい

google.charts.load('current', { 
 
    callback: drawVisualization, 
 
    packages: ['table'] 
 
}); 
 

 
var visualization; 
 
function drawVisualization() { 
 
    var query = new google.visualization.Query(
 
    'https://docs.google.com/spreadsheets/d/18KqoG0VT8c5eaT6IdSzczRPXJX4-CPFfBeImv07n5NA/edit#gid=1324681333' 
 
); 
 

 
    query.setQuery('SELECT B, C, D, E, F, H, I, G'); 
 
    query.send(handleQueryResponse); 
 
} 
 

 
function handleQueryResponse(response) { 
 
    if (response.isError()) { 
 
    alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage()); 
 
    return; 
 
    } 
 

 
    var data = response.getDataTable(); 
 

 
    // answer from question referenced in comments uses setProperty 
 
    // which doesnt appear to work for "width" 
 
    // even when applied to every row -- not shown here 
 
    // setProperty for style on first cell in table 
 
    data.setProperty(0, 0, 'style', 'background-color: red; width: 500px;'); 
 

 
    // use DataView to customize columns 
 
    // first, load view column indexes 
 
    var viewColumns = []; 
 
    for (var i = 0; i < data.getNumberOfColumns(); i++) { 
 
    viewColumns.push(i); 
 
    } 
 

 
    // next, setup columns to be adjusted 
 
    // column index 1 = second column 
 
    viewColumns[1] = { 
 
    calc: function (dataTable, row) { 
 
     var columnValue = dataTable.getValue(row, 1) || ''; 
 
     // class name should match definition in CSS 
 
     return '<div class="column1">' + columnValue + '<div>'; 
 
    }, 
 
    type: 'string', 
 
    label: data.getColumnLabel(1) 
 
    }; 
 

 
    // column index 3 = fourth column 
 
    viewColumns[3] = { 
 
    calc: function (dataTable, row) { 
 
     var columnValue = dataTable.getValue(row, 3) || ''; 
 
     return '<div class="column3">' + columnValue + '<div>'; 
 
    }, 
 
    type: 'string', 
 
    label: data.getColumnLabel(3) 
 
    }; 
 

 
    // next, create DataView and setColumns 
 
    var view = new google.visualization.DataView(data); 
 
    view.setColumns(viewColumns); 
 

 
    // finally, draw chart using view instead of data 
 
    visualization = new google.visualization.Table(document.getElementById('table')); 
 
    visualization.draw(view, { 
 
    allowHtml: true 
 
    }); 
 
}

/* css column definitions */ 
 
.column1 { 
 
    width: 150px; 
 
} 
 

 
.column3 { 
 
    width: 300px; 
 
}

<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="table"></div>