Container div needs to fit width of child table with dynamic td elements.

[donstrack]

On this page:

http://www.utahrails.net/steam/up01-named-1864-1867.php

I have a table that overflows the top-level container (scroll down a bit).

I also have several pages with tables with dynamic td elements that fit the content of each cell, which in turn sets the width of the table. To fit them, I currently set the #bigbox width to auto, like this page:

http://www.utahrails.net/steam/osl03-osl-1897-1915-01.php

I need the top-level container (#bigbox) to always fit whatever width the table might be, with a minimum #bigbox width of 900px.

I can set the #bigbox width (currently 900px), but it would be nice to have #bigbox fit whatever a wide table might be, if it is wider than 900px.

Don Strack

[Paulie_D]

If I may.

Why not just remove the defined width (960px) from #bigbox and put in something like

max-width:90%;

The table is going to bust out pretty much whatever you do..but you might want to look at this: https://css-tricks.com/responsive-data-tables/

Perhaps media queries might be helpful too…are you using those?

[Paulie_D]

Sorry…I just looked at your two links.

If there a reason why you can’t use the same formatting for both / all pages?

[Merri]

The dirty easy trick is to do:

#bigbox {
display: table;
}

[Paulie_D]

Frankly, there seem to be two page ‘versions’ on the site.

On one (the thin one) the top level div has an ID of #bigbox. On the the wide ones the Id is #bigboxw.

Simple answer, change them all over to #bigboxw

#bigbox { /* 900 pixel box for entire page, including header and footer */
width: 900px;
margin: 1em auto; /*to center*/
/* text-align: center; /* added for MSIE5.x/PC */
/* border: 1px solid red; */ /* for troubleshooting */
}

#bigboxw { /* wide box for entire page including header and footer */
width: auto;
margin: 1em;
/* text-align: center; /* added for MSIE5.x/PC */
/* border: 1px solid red; */ /* for troubleshooting */

[Merri]

I’d say one of the bigger issues is that a lot of content has been put into tables. Even those footnotes in the bottom are tables, even though it would make much more sense for them to be ordered lists. My first idea to solve the issue was `display: inline-block` for #bigbox and then just set a width for all paragraphs, lists and other block level elements so that the rows of text wouldn’t be too long and bad for eyes (because who really wants to read a line that spans the entire width of the screen?). But if the footnotes are tables then the same width would have to be applied to all tables too and that then makes #bigbox behave as if the table was only that wide even if it really is too wide to fit.

But in general tables are hard to deal with a dynamic layout. And more so when there is `white-space: nowrap;` on each table cell and all line changes are hardcoded in HTML…

This is one way to make the tables fit:

table.roster td {
/*white-space: nowrap; remove */
border-top: 1px solid #CCC;
}

[donstrack]

Merri: Thanks. {display:table} worked great. #bigbox simply grows in width to match the occasional wide multiple-column table.

Paulie_D: Now that #bigbox displays the tables at whatever width is needed, I’ll get rid of both the #headerw and #bigboxw. The added ‘w’ was for those pages with multiple-column tables that did not fit in 900px.

As for using table layout for the single column tables…hmmm. There are hundreds of pages on my site with tables, and most have been there since 2000-2002. For later additions, I simply used the older tables as templates. Originally, they all had individual HTML formatting, with percentages set for each column, and no CSS. Then I converted to using CSS, but it never occurred to me to change the single column tables (“roster notes”) over to ordered lists. I tried one, and it worked. With a bit of CSS styling, it will look great. Looks like I’ll be doing some global ‘find and replace’ actions in Dreamweaver.

Thanks for your help.

[donstrack]

After spending 2-1/2 hours on one table on one page, changing single column tables to ordered lists, they will just have to stay the way they are. I’ve got better things to do with my time. It may be ugly layout, but that’s the way it will have to stay. Too much fiddling with classes and divs, and margins and padding. Tables work just fine as they are. Thank goodness for undo in Dreamweaver.

But the {display:table} works great, so my problem is solved.

[Author]

Posts