I have a table with expand/collapse functionality. How do I enforce fixed width for columns in such a table?
I used COL tags with width property. But the table becomes distorted when I expand/collapse the rows.
views:
51answers:
1
A:
Make sure you set the style table-layout: fixed on the <table> element. By default, even with <col> elements, the browser will go into ‘auto table layout’ mode, where your widths won't necessarily be respected.
bobince
2010-04-04 10:14:06
My table's column width is perfect and I don't have any problems with the width. My problem is - with the COL tags, the table becomes distorted when I expand the rows. Is there a way implement width for columns other than using 'COL' tags?
Cagey
2010-04-04 10:33:02
What do you mean by “distorted” — example please? There is no such problem with `<col>` that I know of; any other sizing method (eg. putting the width on each `<td>` inside the table) will generally behave the same.
bobince
2010-04-04 10:47:38
Sorry for being unclear.My table has ten rows. All the even rows are hidden by default. The odd rows have a 'plus' icon in the first cell. The plus can be clicked to see the next even row in the table. Clicking the icon again will hide the row again. I do this with simple jquery hide and show methods.The problem with this in IE is whenever I expand and a row and then close it, the border of the row which was expanded stays in the page itself and does not clear. This makes the pages look awkward in IE.
Cagey
2010-04-04 11:13:08
I can't reproduce this at all. Can see we some code? What sort of ‘border’ are you talking about? (You can't put a border directly on a `<tr>` element, and putting it on `<td>` doesn't produce unusual behaviour for me.)
bobince
2010-04-06 15:52:35