Resizable table using jQuery

Allows user to expand or collapse column

by ajinkya_parakh

HTML

<script src="http://craigsworks.com/projects/qtip2/packages/nightly/jquery.qtip.js"></script>
<link rel="stylesheet" href="http://craigsworks.com/projects/qtip2/packages/nightly/jquery.qtip.css">
<link rel="stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.21/themes/ui-lightness/jquery-ui.css">
<table>
 <thead>
    <tr>
        <th id="col1" colspan="9"><b>General Information</b> <span><b>-</b></span></th>
        <th id="col2" colspan="5"><b>Requisition Submission</b><span><b>-</b></span></th>
        <th id="col3" colspan="4"><b>Specimen Request</b><span><b>-</b></span></th>
        <th id="col4" colspan="3"><b>Specimen Processing</b><span><b>-</b></span></th>
        <th id="col5" colspan="8"><b>OncoMap Testing</b><span><b>-</b></span></th>  
     </tr>
 </thead>
 <tr>
     <td class="col1">Patient Name</td>
     <td class="col1">MRN</td>
     <td class="col1">Disease Center</td>
     <td class="col1">Ordering Clinician</td>
     <td class="col1">New / Existing</td>
     <td class="col1">Pending App Date</td>
     <td class="col1">Pending Surgery Date</td>
     <td class="col1">Priority Case For Followup</td>
     <td class="col1">OncoMap Consent Status</td>
     <td class="col2">Requisition Number</td>
     <td class="col2">Requisition Type</td>
     <td class="col2">Requisition Status</td>
     <td class="col2">Responsible Party</td>
     <td class="col2"></td>
     <td class="col3">Institution</td>
     <td class="col3">Date Requested</td>
     <td class="col3">Responsible Party</td>
     <td class="col3"></td>
     <td class="col4">Date Received In Lab Control</td>
     <td class="col4">Responsible Party</td>
     <td class="col4"></td>
     <td class="col5">Initial Pathologist Electronic Review Completed</td>
     <td class="col5">Insufficient Specimen</td>
     <td class="col5">Outside Hospital Specimen Required</td>
     <td class="col5">Initial Sample In Process of Being Located &amp; Retrieved</td>
     <td class="col5">Case Requires...

CSS

body { font-family: Sans-Serif; }

table { 
    width: 175%;
    border: solid 1px #888;
    border-collapse: collapse;
    table-layout: fixed;
 }

table.collapsed {
    width: 0px;
}

th.collapsed
{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 50px;
}
td.collapsed {
    overflow: hidden;
    white-space: nowrap;
    width: 30px;
}

#col1,#col3,#col5 { 
    background-color: #FFFF00; 
    text-align: center;
}
#col2,#col4{
    background-color: #BFFF00;
    text-align: center;
}

table td, table th {
    padding: 5px;
    border: solid 1px #888;
   overflow: hidden;
    }

.alt { background-color: #E6E6E6; }    

.hover { background-color: #81DAF5; }

JavaScript

$(function() {
    // OPTIONAL : Adding some colours 
    $('table tbody tr:odd').addClass('alt');

    // OPTIONAL : changing row colour on hover
    $('tr:gt(1)').hover(function() {
        $(this).addClass('hover');
    }, function() {
        $(this).removeClass('hover');
    });

    $("#dialog-form").dialog({
        autoOpen: false,
        height: 300,
        width: 350,
        modal: true
    });

    $('th,td').each(function() {
        $(this).qtip({
            content: $(this).text(),
            style: {
                name: 'cream'
            }
        });
    });
});

$('tr th').click(function() {
    var id = (this.id);
    $(this).toggleClass('collapsed');

    $('tbody .' + id).toggleClass('collapsed');


    // Special case when all columns are collapsed
    if ($('table tr > th:not(.collapsed)').length) $('table').removeClass('collapsed');
    else $('table').addClass('collapsed');
});


$("#addOSH").click(function() {
    $("#dialog-form").dialog("open");
});


$(".showDetails").bind("mouseover", function() {
    $("#dialog-form").dialog("open");
});


$("tbody tr:first").find('.col1,.col3,.col5').css("background-color", "#FFFF00");

$("tbody tr:first").find('.col2,.col4').css("background-color", "#BFFF00");