Web界面開發工具!Kendo UI for jQuery數據管理之網格列寬

Kendo UI for jQuery R1 2020 SP1試用版下載瀏覽器

Kendo UI目前最新提供Kendo UI for jQueryKendo UI for AngularKendo UI Support for ReactKendo UI Support for Vue四個控件。Kendo UI for jQuery是建立現代Web應用程序的最完整UI庫。ui

要設置Grid列的寬度,請使用其width屬性。get

當您經過col元素從HTML表建立網格時,也能夠設置列的寬度;可是,當對錶單元格使用寬度樣式時,請避免這種方法。table

使用列寬和滾動class

根據是否啓用滾動,網格的列會得到不一樣的操做:表單

  • 默認狀況下,在Kendo UI for jQuery,UI for JSP和PHP UI中爲Grid啓用了滾動。 啓用滾動時:
    • table-layout樣式設置爲fixed,而且全部未定義寬度的列均顯示爲相同寬度。
    • 當水平空間不足時,沒有定義寬度的列將縮小爲零寬度。
    • 不管單元格內容如何,都應遵照定義的列寬。
    • 若是單元格的內容沒法容納,則網格將對其進行包裝或修剪。
    • 在調整列大小的過程當中,只有調整大小的列和table纔會更改其寬度。
    • 調整列的大小或隱藏列時,網格將向其表元素應用像素寬度。 此操做有助於維持除當前已調整大小或隱藏的列以外的全部其他列的寬度。
    • 當全部列均具備像素寬度而且它們的總和超過網格的寬度時,將出現一個水平滾動條。
    • 當全部列均具備像素寬度而且其總和小於Grid的寬度時,將忽略列寬,而且瀏覽器將展開全部列。
  • 默認狀況下,UI for ASP.NET MVC和UI for ASP.NET Core.中的網格禁用滾動。 禁用滾動時:
    • table-layout樣式設置爲auto,若是未明肯定義,則列寬由瀏覽器和單元格內容肯定,這是HTML表的默認操做。
    • 瀏覽器將嘗試遵循全部設置的列寬,但可能會根據其內容來調整某些列的寬度。

常見狀況下載

本節提供有關須要在Grid中實現列寬的常見方案信息。程序

使不可滾動網格服從列寬方法

將table-layout更改成fixed。layout

 

#GridID > table // Header and data table.
{
table-layout: fixed;
}

 

消除列和標題錯位

要在調整網格大小時消除列和標題的不對齊,請提供至少一列沒有指定寬度的列,以便它能夠自由調整。


瞭解最新Kendo UI最新資訊,請關注Telerik中文網!

相關文章
相關標籤/搜索