Archives for tables

Drag and drop sorting of table rows in priority order

A common design pattern is making choices from a list, and then adding those choices to a table of results. Often the table will use some sort of Javascript plugin — Footables, Datatables, etc. — to provide sorting and searching functionality. But what if you want the results in a table, and the only extra you need is a quick way to sort the table into a prioritized list? And you want to do it using a touch-friendly drag/drop interface? Here’s a simple way to do that, using jQuery and jQuery UI. Check out the demo to see it in
Read More

Responsive, CSS-only faux tables

Tables are mildly responsive — the individual cells can resize as necessary. But they aren’t fully responsive without Javascript: You can’t take two TDs that are next to each other and suddenly have them stack, as that requires changing the HTML structure of the table. But you *can* do it with divs that are made to *look* like a table. See the demo here. HTML <div class="table-wrap">     <div class="row-wrap">         <div class="left-td"></div>         <div class="right-td"></div>         <div class="clear"></div>     </div> </div> Note how we’re using divs to mimic a table’s “table -> tr -> td” structure.
Read More