How do you use jquery sortable to sort table cells in all the table's rows?

javascript, jquery, jquery-ui

Solution

I have a CSS trick to let sortable table cells act like the sortable grid sample: https://jqueryui.com/sortable/#display-grid

the Javascript part it as simple as:

$('table').sortable({
    items: 'td', 
});

The point is to make use of the CSS `display` property.

when you drag a cell from row2 to row1, row1 would become 4 cells, row2 only have 2 cells left, and the width would be shrinked to match the table width.

If we use tr `display: inline;` in the stylesheet, let `td` display as `inline-block`. The layout rendering would behave more like a list of inline-blocks. Ignoring the restrictions of tr.

For a live demo, see the fiddle below: http://jsfiddle.net/elin/4Q6Qn/

Problem

I wanna make a sortable table and using jquery sortable I can either sort the rows in the tables or the cells in a row, but I can't move a cell between rows. How can I do that? For example. In here: http://jsfiddle.net/dado_eyad/mKaFe/2/ I wanna move `Second row: 2` to the place of `First row: 1`

Original source