Grow your CSS skills. Land your dream job.

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

  • # March 15, 2013 at 12:28 pm

    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

    # March 15, 2013 at 12:36 pm

    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: http://css-tricks.com/responsive-data-tables/

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

    # March 15, 2013 at 12:42 pm

    Sorry…I just looked at your two links.

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

    # March 15, 2013 at 1:19 pm

    The dirty easy trick is to do:

    #bigbox {
    display: table;
    }

    # March 15, 2013 at 1:25 pm

    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 */

    # March 15, 2013 at 1:42 pm

    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;
    }

    # March 15, 2013 at 4:09 pm

    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.

    # March 15, 2013 at 6:40 pm

    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.

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".