Horizontal Accordion - Table instead of Un-ordered Lists

[Phill Pafford]

I have posted the question on this forum but no response: The Question

Here is and example of what I'm trying to do: The Example

Here is the code breakdown

JavaScript:

<script language="JavaScript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript">
</script>
<script type="text/javascript">
    $(document).ready(function(){
            firstColumn = $(".firstColumn");
            maxWidth = 50;
            minWidth = 50;

                        $("tr th").click(function(){    
                $(firstColumn).animate({
                    width: minWidth + "px"
                }, {
                    queue: false,
                    duration: 900
                });
                $(this).animate({
                    width: maxWidth + "%"
                }, {
                    queue: false,
                    duration: 900
                });
                firstColumn = this;
            });
        });
</script>

CSS:

<style type="text/css">
    .tbl {
        table-layout: fixed;
        border-top: 5px solid #333;
        border-collapse: collapse;
        background: #fff;
    } .tbl td {
        border-bottom: 1px dashed #333;
        padding: 2px 5px;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
    } .tbl th {
        border-bottom: 1px dashed #333;
        padding: 2px 5px;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
    }
</style>

HTML (Table Layout):

<table class="tbl" width="100%">
    <tr>
        <th class="firstColumn">
            Cell 1:Heading
        </th>
        <th>
            Cell 2:Long Heading Data
        </th>
        <th>
            Cell 3:Heading
        </th>
        <th>
            Cell 4:Heading
        </th>
        <th>
            Cell 5:Heading
        </th>
        <th>
            Cell 6:Heading
        </th>
    </tr>
    <tr>
        <td>
            Cell 1:Row 1
        </td>
        <td>
            Cell 2:Row 1:Overflowing Data
        </td>
        <td>
            Cell 3:Row 1
        </td>
        <td>
            Cell 4:Row 1
        </td>
        <td>
            Cell 5:Row 1
        </td>
        <td>
            Cell 6:Row 1
        </td>
    </tr>
    <tr>
        <td>
            Cell 1:Row 2
        </td>
        <td>
            Cell 2:Row 2:Overflowing Data
        </td>
        <td>
            Cell 3:Row 2
        </td>
        <td>
            Cell 4:Row 2
        </td>
        <td>
            Cell 5:Row 2
        </td>
        <td>
            Cell 6:Row 2
        </td>
    </tr>
</table>

Would like to set the width of the table and on mouse-over expand each column to view all the data and on mouse-out display like 10% of the column. Also need a show all or expand all columns, maybe a full view option check-box.

Now I have looked into the colgroup but it doesn't look to be supported for all major browsers.

Thanks again for any efforts in helping me with this, Here is kind of a live DEMO but it's not working correctly in FF and needs to hide the overflow as well for the <th> tags