Flexible DIVs as Columns?

[SpaceNinja151]

This web app uses a table to display rows of users, and has columns for buttons, etc. Tables work well for this kind of thing because if someone's name is long, the other cells will compensate for it without pushing the name to two lines.

There are now reasons for me to use DIVs, since I want to have an area slide down underneath a selection for even more info, but <tr>s don't slideDown, so I think I will have to use DIVs.

My question is - is this always a limitation on DIVs - that they are fixed and will never grow a little to accommodate a longer string of characters in it? Is it something I just have to deal with or can I mimic a table somehow?

Note: Site needs to be IE6-friendly, so I can't use CSS's display:table property.

 

[chrishirst]

but <tr>s don't slideDown, so I think I will have to use DIVs.

You can put a hidden div or a span in a cell (TD) and display it on hover or click.

 

[SpaceNinja151]

The table itself has padding, so you're saying have a new TR just containing this invisible DIV, have a class on it that removes all padding (so it truly is invisible until needed) and then it will slide down nicely when the hidden DIV inside it slides down?

I'll give it a shot...

 

[SpaceNinja151]

No good. It can't be in a separate <tr> because there is a rollover effect, so the original line and the line that slides below it both need to have the same rollover effect, without using all kinds of CSS and jQuery to link them so they behave the same, yadda yadda.

So back to the original question, do you know of a way to display content in a way that looks like a table in that the columns will move slightly if pressed, similar to how columns in a <table> will widen when the content inside them is long? Static width DIVs are so limited in that they can't be fluid and change based on what's inside them...

 

[chrishirst]

The table itself has padding, so you're saying have a new TR just containing this invisible DIV, have a class on it that removes all padding (so it truly is invisible until needed) and then it will slide down nicely when the hidden DIV inside it slides down?

No, I didn't mention a table row element and hidden means using display and visibility properties NOT removing the padding.

So back to the original question, do you know of a way to display content in a way that looks like a table in that the columns will move slightly if pressed, similar to how columns in a <table> will widen when the content inside them is long?

Well yes there is, but for some reason the worlds second worst browser has to be supported.

 

[SpaceNinja151]

I knew you meant display:none; when you said "hidden", I'm just saying that a <td> with padding is not hidden because it will look like a very thin row, even when the content I am trying to hide is in a hidden <div> inside that <td>. But I digress...

"...but the worlds second worst browser has to be supported."

By that you mean I could use CSS's display:table; property if I weren't supporting IE6. Yes that is unfortunate, but this app is for use by doctor's offices, many of which use IE6 so it's a solid part of our demographic we must cater to.

Out of curiosity, what is the first world's worst browser? IE5?

 

[chrishirst]

Netscape Navigator 4.5, the damned thing could even break using tables!

 

[SpaceNinja151]

Ah, the good 'ol days. You could write all the HTML for a site by memory - no need for dynamic PHP or databases. Everything was in one "online brochure" with just a few tags spaced out with <br>s. It was a simpler time.

...but then Netscape would break.