3

I have the following:

<div style="width:100%;">

 <table>
  <tr>
    <td style="width:30px;">hi</td>
    <td style="width:40px;">hi</td>

    <td id="lotoftext" style="width:auto;white-space:nowrap;overflow:hidden;">LOTS Of text in here, LOTS</td>

    <td style="width:25px;">hi</td>
  </tr>
 </table>

</div>

What I want to happen is for this table to grow to 100% possible of the outer DIV. Problem is, that the table, with a lot of text inside, ID='lotoftext' is causing the table to grow to a width bigger than the outer div which then breaks the page.

Any ideas? thanks

AnApprentice
  • 108,152
  • 195
  • 629
  • 1,012
  • Two things to try: add width="100%" to the table and set the td widths using width="30px" rather than via css. And is this happening in all browsers? – Sean Feb 07 '11 at 03:41

4 Answers4

0

can you use max-width? You might need to put a div inside that specific TD and give that the max-width

Itay Moav -Malimovka
  • 52,579
  • 61
  • 190
  • 278
  • Problem is the page is fluid. so I don't know the max width. I'd have to use JS which I'd rather not do until I exhaust all CSS options. – AnApprentice Feb 07 '11 at 03:09
  • good question but the problem is the other TD's are a set width, so that breaks the ability to then use a % – AnApprentice Feb 07 '11 at 04:28
0

Unless it is tabular data, you should build it using DIVs and CSS. You should be able to achieve what you want with less of a headache this way.

Dan
  • 10,171
  • 7
  • 38
  • 31
  • How? Gmail for instance uses tables for this exact need. – AnApprentice Feb 07 '11 at 03:14
  • What will you be using it for? Give an example. – Dan Feb 07 '11 at 03:37
  • 1
    Downvoted because "don't use a table" is not an answer to the OPs problem. If you're going to suggest using divs and CSS, then take the time to SHOW them how to do it (or find a webpage telling them how to do so). – Sean Feb 07 '11 at 03:39
  • @Sean, denoted - seriously? I didn't say not to use a table - I said unless it is tabular data then use DIVs and CSS. There is a million and 10 possibly answers and unless AnApprentice is more specific then they are going to get vague answers (hence why I asked for more information - see above ...) – Dan Feb 07 '11 at 04:02
0

AnApprentice, to achieve this layout using DIV's and CSS (alternate option to using tables) you could approach the situation like this:

CSS:

#body_container{
    max-width:700px;
}

.data-container{
    background-color:#ccc;
    zoom:1;
}

.data-content_a{
    width:30px;
    float:left;
    background-color:#3FF;
}

.data-content_b{
    width:40px;
    float:left;
    background-color:#CF0;
}

.data-content_c{
    width:25px;
    float:right;
    background-color:#9FF;
}

.data-content_lotsoftext{
    float:left;
    background-color:#FCF;
    margin:-20px 26px 0 71px;
    clear:left;
    display:inline;
}

.clear{
    clear:both;
    padding:0;
    margin:0;
}

HTML:

<div id="body_container">
    <div class="data-container">
        <div class="data-content_c">4</div>
        <div class="data-content_a">1</div>
        <div class="data-content_b">2</div>
        <div class="data-content_lotsoftext">lots of text goes here!</div>
    <div class="clear"></div>
    </div>
</div>

The #body_container (or outter container) can to set to any width or no width. The left margin on the .data-content_lotsoftext is the combined width of .data-content_a and .data-content_b (70px + 1px to be on the safe side) and the right margin on .data-content_lotsoftext is the width of data-content_c (25px + 1px to be on the safe side).

By not assigning a width to .data-content_lotsoftext it will automatically stretch to be full width. display:inline helps it sit better in ie6.

Tested in Firefox, Chrome, IE8, IE7 and IE6 (IE6 and 7 are a little glitchy - if anyone could help refine the CSS to get it to work perfectly in IE6 and 7, please shout out!)

enter image description here

Hope this helps. Dan

Dan
  • 10,171
  • 7
  • 38
  • 31
-1

The scenario you are describing is simply not suited for a table. A table should only be used when displaying tabular data. You should be using some other kind of html elements to build your structure and style it with CSS.

Kenny Wyland
  • 20,844
  • 26
  • 117
  • 229
  • Downvoted because "don't use a table" is not an answer to the OPs problem. If you're going to suggest using divs and CSS, then take the time to SHOW them how to do it (or find a webpage telling them how to do so). – Sean Feb 07 '11 at 03:38
  • Sean, the specifics of how he should handle it could be 10+ different ways depending on what he is really trying to do. Without knowing the specifics of what he needs, I could offer html, but it might be JUST as bad as using a table. Sometimes the answer to "how do I do this with a table" is "don't do this with a table, use divs." – Kenny Wyland Feb 07 '11 at 03:47