如何更改 react-google-charts 表中框的宽度？答案

【问题标题】：How to change the width of box in react-google-charts table?如何更改 react-google-charts 表中框的宽度？
【发布时间】：2020-09-03 04:25:41
【问题描述】：

现在，我使用 -https://react-google-charts.com/table-chart#simple-example 创建了表。但我无法使用 react 更改框的宽度。我找到了使用 JavaScript 的 Bar-format 文档 - https://developers.google.com/chart/interactive/docs/reference#barformat

谁能帮我解决这个问题？

export default class App4 extends React.Component {
    render() {
        return (
            <div className={"todo-item2"}>
                <Chart
                    width={'500px'}
                    height={'300px'}
                    chartType="Table"
                    loader={<div>Loading Chart</div>}
                    data={[
                        [
                            { type: 'string', label: 'DATE' },
                            { type: 'string', label: 'GAME - 1' },
                            { type: 'string', label: 'GAME - 2' },
                            { type: 'string', label: 'GAME - 3' },
                        ],
                        ['2020-04-01', 'Team A (Home) vs Team B (Visitor)', 'Team C (Home) vs Team D (Visitor)', 'Team E (Home) vs Team F (Visitor)'],
                        ['2020-04-02', 'Team F (Home) vs Team A (Visitor)', 'Team D (Home) vs Team C (Visitor)', 'Team F (Home) vs Team B (Visitor)'],
                        ['2020-04-03', 'Team B (Home) vs Team A (Visitor)', 'Team C (Home) vs Team D (Visitor)', 'Team F (Home) vs Team E (Visitor)'],
                    ]}
                    options={{
                        showRowNumber: false,
                        width: '10000px', 
                        //height: '500px',
                        
                    }}

                    rootProps={{ 'data-testid': '1' }}
                />
            </div>
        );
    }
}
ReactDOM.render(<App4 />, document.getElementById("root"));

Please see the image

【问题讨论】：

能否分享一下用于创建条形表格的代码？
对不起，问题不是条形格式。我面临更改表格中框宽度的问题。还附上代码和图片以了解问题。
例如，根据图像，Game-1 列将数据显示为两行，但我想将其设为一行

标签： charts google-visualization react-google-charts

【解决方案1】：

使用以下配置选项来更改宽度，
或任何其他样式的表格单元格。

首先，我们必须包括...

allowHtml: true

接下来，我们为表格单元格分配一个 css 类名...

cssClassNames: {
  tableCell: 'game-cell'
}

例如

options={{
  allowHtml: true,
  cssClassNames: {
    tableCell: 'game-cell'
  },
  showRowNumber: false,
}}

然后我们将 css 类添加到页面的某处，
在<style> 标记中，或在使用<link> 标记的单独css 文件中

.game-cell {
  width: 400px;
}

如果要为单元格指定特定宽度，请使用上述 css。

如果你想防止换行到两行，请使用以下...

.game-cell {
  white-space: nowrap;
}

【讨论】：