Unsuccessful in applying the jQuery.resizable API to an HTML table

Question

I am wanting to apply the jQuery resizable API to my HTML table, but it does not seem to be working as it should, there is no handle appearing at the top of my table headers to resize the columns.

Here is the fiddle:

http://jsfiddle.net/6434t/3/

$(function() {
$("#data tr th").resizable({ handles: 'e' });
});

Answer 1

I played around with the CSS line-by-line to see what could have changed that would make jQuery not compatible with the CSS.

Changed the css line from:

#data thead tr {
        top: expression(this.offsetParent.scrollTop);
        position: relative;
}

to:

#data th tr {
        top: expression(this.offsetParent.scrollTop);
        position: relative;
}

Answer 2

A couple of things to note

Your table row tags are not closed.</tr>

Your table head tag is not closed.</thead>

You are not including jquery UI in your file.

Remember to use your browser's debugger. It is there to help you in situations like the missing jquery UI code ref error.

I assumed you wanted the whole table to be re sizable in this example but if not it should still be able to get you started. My revision