Question

我遇到问题，在handsontable中找到设置单元格中可见行数的问题。问题是我在一个单元格中有一些15到20行的行，它使我的表格变得庞大。我希望能够设置单元格中可见行的最大数量，并使用户能够在单元格中滚动以查看其余内容。

感谢您的帮助！

回答以下评论中单元格中多行的含义：

这是一行：

Example of one line

这是多线：

multiline1
multiline2
multiline3

Answer 1

在handsontable.full.css文件中，我添加了'white-space：nowrap;'并且隐藏了单元格中的额外行。我还添加了'text-overflow：省略号;'将省略号添加到将成为多行的单元格的末尾，以获得更清晰的外观。

以下是我更改的handsontable.full.css文件中的块：

.handsontable th,
.handsontable td {
  border-right: 1px solid #CCC;
  border-bottom: 1px solid #CCC;
  height: 22px;
  empty-cells: show;
  line-height: 21px;
  padding: 0 4px 0 4px;
  /* top, bottom padding different than 0 is handled poorly by FF with HTML5 doctype */
  background-color: #FFF;
  vertical-align: top;
  overflow: hidden;
  outline-width: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
  /* preserve new line character in cell */
}

Answer 2

如果你确实想要滚动那么你应该做的是两件事。首先，您需要在热门实例上设置width，这样您的列就不会太大。实际上，我也会设置colWidths选项。

之后，您只需要添加CSS规则：

.handsontable td {
    overflow-y: scroll;
}

这将导致溢出的文本（如多行）显示滚动条。要自己测试一下，右键单击您正在谈论的其中一个单元格，然后单击＆＃34; Inspect element＆＃34;。在右侧，找到＆＃34;样式＆＃34; tab并在element.style块中添加我上面写的属性。你会发现它有效。

Handsontable，设置单元格中可见行的数量

2 个答案: