Column resize by jQuery UI

by Ea Bangalore

HTML

<h1>Column resize by jQuery UI</h1>
<table class="t">
    <thead>
        <tr>
            <th>#</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Username</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Mark</td>
            <td>Otto</td>
            <td>@mdo</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Jacob</td>
            <td>Thornton</td>
            <td>@fat</td>
        </tr>
        <tr>
            <td>3</td>
            <td colspan="2">Larry the Bird</td>
            <td>@twitter</td>
        </tr>
    </tbody>
</table>

CSS

table {
    width: 500px;
    border: outset 1px;
    border-spacing: 2px;
}
table td, table th {
    border: inset 1px;
}

JavaScript

$(function() {
    $("table tr th, table tr td").resizable({handles: 'e'});
});