Resizable HTML Table Columns Using jQuery UI

I went round and round this afternoon trying to find something to resize my table columns. It seemed like it should be easy but unfortunately it was not. All of the plug-ins I found seemed promising until I actually tried to implement them in my code. I finally realized that most of them worked...as long as my table was smaller than my viewport. I had tried to use the jQuery UI resizable function but to no avail. Finally, I figured out a way to do it.

The trick was to add a blank div within my <th> tag. Then upon resizing the column header, it would actually resize the div within.

Here's the code on Codepen.

Edit: I'm positive this code could be refactored to look/work better. This is just my first go at it.

Making Lists into To-Do Lists with jQuery

I have a folder containing several procedures that are in written with HTML lists. I wanted a way to quickly modify them so that I could check off each line item as I went through the procedure. And as I checked off the line items, I wanted it to strike through the text to make it clearer that that step had been done.

The first thing I did was define a CSS class:

.strikethrough {
    text-decoration: line-through;
}

Then I added this JavaScript to my header file:

function strikethrough(element) {
    var $checkbox = $(element);
    if ($checkbox.prop("checked")) {
        $checkbox.parent().addClass("strikethrough");
    }
    else {
       $checkbox.parent().removeClass("strikethrough");
    }
}
$(function() {
    var checkboxCode = "<input type='checkbox' onclick='strikethrough(this)' style='margin-right: 10px' title='Mark this item done' />";
    $("li").each(function() {
        $(this).html(checkboxCode + $(this).html());
    });
});

Here is a demo on CodePen along with the source.