Web开发：看如何定义Kendo UI Grid Width

Kendo UI for jQuery R2 2020 SP1试用版下载

Kendo UI目前最新提供Kendo UI for jQuery、Kendo UI for Angular、Kendo UI Support for React和Kendo UI Support for Vue四个控件。Kendo UI for jQuery是创建现代Web应用程序的最完整UI库。

Width

默认情况下，Grid没有设置宽度，其操作类似于块级元素，并扩展为100％的宽度（父元素的宽度）。

入门指南

要控制Grid的宽度，请将CSS width属性设置为Grid本身或其某些父类， 如果您使用层次结构，并且明细模板是可滚动的，否则明细模板必须比所有主列的宽度之和窄。

如果启用滚动并且所有列宽的总和大于Grid的宽度，则会出现一个水平滚动条。 如果禁用滚动并且各列不适合，则它们会溢出Grid的div元素。div溢出导致窗口小部件的右边界穿过数据单元格，因为Grid是div元素内的table元素，而包围它们的内容表可以水平扩展到100％以上，而div元素缺乏这种操作。

为避免表溢出，请应用以下任一方法：

• 启用滚动功能，在使用Kendo UI Grid MVC封装器时，默认情况下降禁用滚动功能。
• 为Grid wrapper设置一个足够大的宽度或最小宽度的样式——div class =“ k-widget k-grid”元素。
• （仅当前两个方法不可接受时才使用此方法）浮动Grid wrapper和清除小部件后的浮动，浮动元素会根据需要自动扩展和收缩以包围其内容。

应用最小宽度

根据特定的方案，您可以使用以下任何一种方法来定义网格的最小宽度。

如果禁用了滚动，请使用以下CSS。

#GridID
{
min-width: 800px;
}

如果启用了滚动并且Grid不是分层的（没有嵌套表），请使用以下CSS。

#GridID .k-grid-header-wrap > table, // A header table.
#GridID .k-grid-content table, // A data table, no virtual scrolling.
#GridID .k-virtual-scrollable-wrap table // A data table, with virtual scrolling.
{
min-width: 800px;
}

如果启用了滚动并且网格是分层的（具有嵌套表），请使用以下CSS。

#GridID .k-grid-header-wrap > table, // A header table.
#GridID .k-grid-content table, // A data table, no virtual scrolling.
#GridID .k-virtual-scrollable-wrap table // A data table, with virtual scrolling.
{
min-width: 800px;
}
#GridID .k-grid-content table table, // A data table, no virtual scrolling.
#GridID .k-virtual-scrollable-wrap table table // A data table, with virtual scrolling.
{
min-width: initial;
}

---

了解最新Kendo UI最新资讯，请关注Telerik中文网！