Align columns of different tables in a sortable list

I have a sortable list, each sortable item contains a table. I would like to align the 开发者_Python百科columns from all the tables. Using table-layout: fixed in CSS works fine, but when the cell contents are too long, the contents overlaps. I would like the tables to expand to fit the content in the cells and horizontal scrollbar should appear if there's not enough horizontal space.

I tried to resolve this putting everything in one table, but this is not good, because in some cases extra content appears under the table in the sort item, and also, sorting table rows with jquery is not working so fine.

The simplified version of the code is here: http://jsfiddle.net/buZUz/1/

I think what you are trying to achieve here with multiple tables will be very difficult to achieve and make work accross different browsers. I have had a lot of "issues" in the past with table-layout:fixed and now never use it.

I'd be tempted to go back to one table and make each row sortable.

To get the extra content under the data in each row you could :

-add another row with a colspan that covers all of the rows and put you extra content in that.

-add hover event that shows the extra row or the data in a popup if it doesn't have to always be displayed.

-add the extra detail in a seperate table , "a detail table" that gets populated depending on which row is selected.