Kendo UI for jQuery数据管理使用教程：网格列宽

---

Kendo UI for jQuery R1 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库。

要设置Grid列的宽度，请使用其width属性。

当您通过col元素从HTML表创建网格时，也可以设置列的宽度；但是，当对表单元格使用宽度样式时，请避免这种方法。

使用列宽和滚动

根据是否启用滚动，网格的列会获得不同的操作：

• 默认情况下，在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。

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

消除列和标题错位

要在调整网格大小时消除列和标题的不对齐，请提供至少一列没有指定宽度的列，以便它可以自由调整。

---

扫描关注慧聚IT微信公众号，及时获取最新动态及最新资讯