Grid from HTML Table: text-align issue

3 posts, 1 answers
  1. John
    John avatar
    9 posts
    Member since:
    Dec 2015

    Posted 11 Aug 2016 Link to this post


    I'm creating a Kendo Grid from an existing HTML table. Everything works exactly as I need and expected...with one exception. Text alignment.

    My table has a few columns with numeric values and I need these right aligned.

    I thought it would be as simple as defining a col like this: <col style="text-align:right;" /> But that doesn't work. Oddly, this works: <col style="width:20px;" />

    So, I next tried to format the alignment in the <thead> section, but I couldn't find a solution there.

    <th data-field="Total" data-type="number" data-template="#= kendo.toString(Total , 'n0')#">Total</th>


    I know I could write a template that is applied on a row by row basis, but I don't want to do that. We have a large existing website with lot's of tables and would like to use Kendo UI to replace them...but with minimal dev time.


    Any ideas? Cheers

  2. Answer
    Iliana Nikolova
    Iliana Nikolova avatar
    2622 posts

    Posted 15 Aug 2016 Link to this post

    Hi John,

    The easiest way to achieve this is by using CSS :nth-child selectors. For your convenience here is a basic example.

    Iliana Nikolova
    Telerik by Progress
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
  3. John
    John avatar
    9 posts
    Member since:
    Dec 2015

    Posted 17 Aug 2016 in reply to Iliana Nikolova Link to this post

    Perfect :) Thanks for the solution. Worked like a charm.
Back to Top