初始可操作视图没有拉伸到正确的宽度答案

【问题标题】：Initial handsontable view does not stretch to correct width初始可操作视图没有拉伸到正确的宽度
【发布时间】：2015-11-06 13:50:40
【问题描述】：

我有一个可动手操作的对象（实际上是两个对象，都在引导模式中），它们在页面构建后加载了数据。这是一个重复问题https://jsfiddle.net/mtbdeano/w7dofbyy/的jsfiddle

表格的尺寸太窄了，即使使用了stretchH: all 选项。一旦我单击内容，它们就会像魔术一样将大小调整为正确的列宽。我是否缺少一些初始化参数？加载新数据后如何将其调整为正确的宽度？

  /* these tables are in the modal */
  $('#keyword_table').handsontable({
    data: keyword_data,
    rowHeaders: true,
    colHeaders: ['Keywords'],
    columnSorting: true,
    contextMenu: true,
    height: 256,
    stretchH: "last",
    enterBeginsEditing: false,
    minSpareRows: 1
  });

我正在使用此代码加载数据，该代码在成功的 ajax 调用时调用：

function load_table_from_ajax(tbl, data) {
  var $tbl = $(tbl);
  var hot = $tbl.handsontable('getInstance');
  // this formats my data appropriately
  var new_data = _.map(data, function (kw) {
    return new Array(kw);
  });
  hot.loadData(new_data);
  /* I have tried also doing a: hot.render(); */
}

根据教程，所有代码看起来都是正确的，知道为什么表格不能正确拉伸/调整大小吗？

在与 Handsontable 交互之前，它看起来像这样：但是在单击标题或添加值后：

【问题讨论】：

你能发布 jsfiddle 吗？您的代码可能还有其他问题。您应该尝试做的一件事是定义实际表格的宽度，因为您不在这里这样做
jsfiddle 是 jsfiddle.net/mtbdeano/w7dofbyy

标签： javascript jquery twitter-bootstrap handsontable

【解决方案1】：

尝试在初始化时提供width。由于您没有设置它，stretchH 可能无法进行所需的计算。我以前见过这种行为，设置它通常可以解决它。

【讨论】：

感谢@ZekeDroid，用宽度击中 HTML 元素没有帮助，但上面的列宽设置起到了作用。
不是html元素，而是初始化本身。在您的初始化对象中。另外，我强烈建议创建一个对象而不是将其附加到 jquery。这意味着使用new Handsontable(container, options) 而不是$(container).handsontable(options)。
所以你想添加 width: 100 或者你想要的任意多个像素
所以是的，NOT 使用 jquery 选择器是诀窍。它还解决了另外两个错误。感谢您的帮助@ZekeDroid
@ZekeDroid 您应该添加您对选择器的评论作为实际答案。（它完全解决了我遇到的类似问题）

【解决方案2】：

试试colWidths:[100]

以像素为单位定义列宽。接受数字，字符串（将被转换为数字），数字数组（如果您想为每列单独定义列宽）或函数（如果您想在每次渲染时动态设置列宽）。

【讨论】：

感谢@FranciscoV，这确实有效，但我希望它能够响应父容器的大小。
它并不完美或反应灵敏，但它可以工作，谢谢！