jQuery UL sortable list, CSS how to align column style data

I'm using jQuery UI, sortable on an ul element. All good, except over time the data in my li elements has become table like, in the sense there are multiple columns of data.

They aren't aligning correctly because this seems to be hard to do in ul, and indeed not what ul's are designed for.

I have 2 choices the way I see

1. Work out some really cool css to make my ul / li format nicely
2. Work out how to convert this to a sorta开发者_Go百科ble table

With option 2., looking at a few plugins that exist (tablednd for example), they seem very old. I don't believe the jQuery UI

Anyone got any recommendations as far as a direction I should head?

---

One good solution is learning and implementing jqGrid because

• It's in active development (latest release a week ago)
• It has solid documentation
• It has strong community support (including many here)
• Learning its extended functionality now will save you time on future projects that might need it

Check out the demo page and click New in version 3.6 > Column Reordering for an example of what you need.