Stop table columns resizing
Posted: Tue Sep 29, 2009 5:38 pm
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:
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.
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">
</td>
<td>
123456
</td>
<td>
123456
</td>
<td>
123456
</td>
<td>
123456
</td>
<td>
123456
</td>
<td>
123456
</td>
</tr>
<tr class=" hidden">
<td> </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>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.