CSS Table Columns not lining up

I have the following Table example here: http://jsfiddle.net/Lu9y3/

Which is based on the Telerik example here: http://demos.telerik.com/aspnet-mvc/Grid/Paging?theme=vista which is a UI component I am using in an app I am building.

As you can see they use two separate tables to achieve the fixed header and scrollable content. BUT the headers and columns in both tables still line up correctly.

Even if I REMOVE the style from the <col> in the Telerik examples using Web Inspector the columns will still line up... And they are NOT using jQuery to adjus开发者_JAVA技巧t the width. So how come they have their columns lining up and mine do not?

How are they doing this?

The reason you are having issues is because you are using two separate tables. Tables adjust column width to the longest unbroken content. The way Telerik does it, they have four columns and have set the widths explicitly in all but the third column. This allows the third column to expand and fill the remaining space.

Using table-layout:fixed will help but it will make all your columns evenly spaced regardless of content. I recommend setting the width of each column, or better yet make a class for each width and reuse that on the appropriate columns.

Lined up sample

I don't use classes in my example but I think you get the idea. I used overflow:hidden on th and td to make sure that longer content doesn't display over the other cells of the table. I also think the visual effect of the table works better with fewer columns seven or eight columns might be a bit overkill, but that's my personal opinion.

Using table-layout: fixed; makes the table line up ;)

I'm using Google Chrome, and when I open up the editor (F12) to Telerik's site and change the settings, they start not lining up. I've done some research, and according to W3.org on <col>, it looks like there is no way to globally name a <col> that you can use in multiple talbes (sadly).

Also, in Telerik's example, it appears that the <col> definitions specify a width in the tag itself (likely manually placed via some JS). I think this is the only way to do it other than setting specific CSS rules, but that may not work as well as a more dynamic solution.

Best of luck!