Search code examples
csscss-tables

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 adjust the width. So how come they have their columns lining up and mine do not?

How are they doing this?

Solution

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