Question

我发现，从理论上讲，谷歌图表应该在你向下滚动时自动修复表格的标题行：

“标题行在用户滚动时保持固定。” （https://developers.google.com/chart/interactive/docs/gallery/table - 概述）

由于一些奇怪的原因，我的表没有修复标题行。这是代码。我基本上从Google的页面（上面的链接）中复制了相同的示例代码，并为其添加了大约40行。我错过了什么吗？我已经尝试过Firefox和Chrome，同样的事情，没有修复。

<html>
  <head>
    <script type='text/javascript' src='https://www.google.com/jsapi'></script>

    <script type='text/javascript'>
      google.load('visualization', '1', {packages:['table']});
      google.setOnLoadCallback(drawTable);
      function drawTable() {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Column0');
        data.addColumn('number', 'Column1'); 
        data.addRows([
          ['a',1],
          ['a',1],
          ['a',1],
          ['a',1],
          ['a',1],
          ['a',1],
          ['a',1],
          ['a',1],
          ['a',1],
          ['a',1],
          ['a',1],
          ['a',1],
          ['a',1],
          ['a',1],
          ['a',1],
          ['a',1],
          ['a',1],
          ['a',1],
          ['a',1],
          ['a',1],
          ['a',1],
          ['a',1],
          ['a',1],
          ['a',1],
          ['a',1],
          ['a',1],
          ['a',1],
          ['a',1],
          ['a',1],
          ['a',1],
          ['a',1],
          ['a',1],
          ['a',1],
          ['a',1],
          ['a',1],
          ['a',1],
          ['a',1],
          ['a',1],
          ['a',1],
          ['a',1],
          ['a',1],
          ['a',1],
          ['a',1],
          ['a',1],
          ['a',1],
          ['a',1],
          ['a',1]
        ]);

        var table = new google.visualization.Table(document.getElementById('table_test'));
        table.draw(data, {showRowNumber: true});
      }
    </script>
  </head>
  <body>
    <div id="table_test" style="width: 200px;"></div>
  </body>
</html>

Answer 1

如果向表中添加“height”属性，则在向下滚动页面时，标题行将保持在顶部。使用您的示例，只需将以下内容添加到您的选项中。

您的代码：

table.draw(data, {showRowNumber: true});

调整后的代码：

table.draw(data, {showRowNumber: true, height: 200});

如果您希望有人滚动大量数据，这很有用，但这不是您认为的那样。如果你想让行标题'float'，你必须使用绝对定位和一些花哨的CSS来处理滚动页面时的工作方式（假设页面滚动）。如上所述，使用高度要容易得多。

Google图表表格中的标题行修复无效

1 个答案: