Kendo UI for jQuery數據管理使用教程：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;
}