Page 1 of 1

Stop table columns resizing

Posted: Tue Sep 29, 2009 5:38 pm
by pickle
Hi all,

Background:
I've got a table that will output everything my database knows about all our applicants. ~200 columns for ~1000 people. That's too much data to display on the screen at once, so I've decided to only show 6 columns for each applicant, then expanding that to the full 200 when the user hits a button.

The 200 columns will be displayed in another table in a hidden row, immediately under the initial row. So, when expanded, each applicant will have 2 rows: one showing only 6 fields, the second showing all 200. Those first 6 will be shown twice.

When the second row is shown, I don't want the user to have to scroll off screen. So, I've wrapped the contents of that cell in a div with overflow:scroll set, so if the contents go beyond the width of the cell (which they will), a scroll bar will appear.

Problem:
When I show the 200 rows, the entire table gets resized - as I guess it should since the contents of the visible cells is changing. I don't want that to happen as it's startling to the user.

To solve this, initially I set table-layout:fixed on the table, but then columns were much wider than their contents required (Explanation). So, I tried explicitly setting the widths of the columns and setting table-layout in Javascript. However, that doesn't resize the table when the window is resized.

What I want:
Ideally I want the initial table, when it's only showing 6 fields/applicant, to look just like a normal table, with the columns sized to contain their content. When the second row, showing the full 200 fields, is shown, I want the size of the 6 columns to not change, and I want the table containing the 200 rows to be contained in the table, and scroll when necessary.

If I have to, I guess I can just set the table-layout:fixed property & deal with the fact that the cells aren't resized awesomely - but that could really cause some problems down the line.

Here's an HTML source snippet:

Code: Select all

<table id = "applicants-table">
    <tbody>
        <tr class = "headers">
            <th></th>
            <th>
                ID
            </th>
            <th>
                First name
            </th>
            <th>
                Last name
            </th>
            <th>
                Program
            </th>
            <th>
                Major
            </th>
            <th>
                Minor
            </th>
        </tr>
        <tr>
            <td class = "expand">
                &nbsp;
            </td>
            <td>
                123456
            </td>
            <td>
                123456
            </td>
            <td>
                123456
            </td>
            <td>
                123456
            </td>
            <td>
                123456
            </td>
            <td>
                123456
            </td>
        </tr>
        <tr class=" hidden">
            <td>&nbsp;</td>
            <td colspan = "6" style = "padding:0;overflow:scroll;border:1px solid red;">
                <div style = "width:100%;overflow:scroll;">
                    <table style = "border:1px solid green;">
                        <tr>
                            <td>
                                Other field
                            </td>
                            <td>
                                Other field
                            </td>
                            <td>
                                Other field
                            </td>
                            <td>
                                Other field
                            </td>
                            <td>
                                Other field
                            </td>
                            <td>
                                Other field
                            </td>
                            <td>
                                Other field
                            </td>
                            <td>
                                Other field
                            </td>
                            <td>
                                Other field
                            </td>
                            <td>
                                Other field
                            </td>
                            <td>
                                Other field
                            </td>
                            <td>
                                Other field
                            </td>
                            <td>
                                Other field
                            </td>
                            <td>
                                Other field
                            </td>
                            <td>
                                Other field
                            </td>
                            <td>
                                Other field
                            </td>
                        </tr>
                    </table>
                </div>                          
            </td>
        </tr>
    </tbody>
</table>
When the .expand cell is clicked, the appropriate row gets the .hidden class removed. #applicants-table is set to 100% width, and .expand is set to 50px wide. Other than that, the CSS applied is what you see.

I should note that I'm open to any suggestions on how to go from displaying 6 fields/user to 200 fields/user. I'm not married to the current setup or approach - I'll try whatever could work.

Thanks for any & all input.

Re: Stop table columns resizing

Posted: Wed Sep 30, 2009 12:25 pm
by kaszu
On row click, just before you remove .hidden, take previous rows offsetWidth+'px' and set divs width to it, that will solve table size problem. Resizing browser won't affect divs width until next show/hide :(
Of course you can bind to 'onresize' event and reset divs width, but that will be a little tricky, because table width can't be smaller than div.
I hope someone can come up with a better solution.

Re: Stop table columns resizing

Posted: Wed Sep 30, 2009 12:30 pm
by pickle
Thanks ~kaszu. I figured if anyone in this forum would answer it'd be you.

I've continued thinking about this and I've decided to remove the "must resize when the window resizes" restriction. This is an internal application & the target audience won't be resizing their window a whole lot anyway.

Using Javascript to statically set the width of the columns, then setting table-layout:fixed seems to have solved my problem. I'd really like a CSS only solution, but I don't think that's possible.