New to Kendo UI for jQuery? Download free 30-day trial

Adjust Grid Row and Header Height to Make Them Smaller


Product Progress® Kendo UI® Grid for jQuery
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: ""
            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

In this article