Edit this page

Adjust Grid Row and Header Height to Make Them Smaller


Product Grid for ProgressĀ® Kendo UIĀ®
Operating System All
Browser All
Browser Version All


How can I set the heights of the Grid rows, including the header, to a minimum or a specific height value?


To adjust the size of the rows in both the body and the header, use CSS and specify the height and padding properties for the th elements inside the thead and tr, and the td elements inside the tbody of the Grid.

<div id="example">
    <div id="grid"></div>
      $(document).ready(function() {
          dataSource: {
            type: "odata",
            transport: {
              read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
            schema: {
              model: {
                fields: {
                  OrderID: {
                    type: "number"
                  Freight: {
                    type: "number"
                  ShipName: {
                    type: "string"
                  OrderDate: {
                    type: "date"
                  ShipCity: {
                    type: "string"
            pageSize: 20,
            serverPaging: true,
            serverFiltering: true,
            serverSorting: true
          filterable: true,
          sortable: true,
          pageable: true,
          columns: [{
            field: "OrderID",
            filterable: false
            field: "OrderDate",
            title: "Order Date",
            format: "{0:MM/dd/yyyy}"
          }, {
            field: "ShipName",
            title: "Ship Name"
          }, {
            field: "ShipCity",
            title: "Ship City"
      .k-grid-header .k-header {
        height: 20px;
        padding: 0;

      .k-grid tbody tr {
        line-height: 14px;

      .k-grid tbody td {
        padding: 0;

See Also

Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article