HTML - Given a table, how to let one column be fluid without breaking the layout

Question

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>

I want this table to grow to 100% of the external DIV. The problem is that a table with a lot of text inside ID = 'lotoftext' causes the table to grow to a larger width than the outer div, which then splits the page.

Any ideas? thank

Answer 1

can you use max-width ? You may need to set the div inside this particular TD and indicate that the maximum width

Answer 2

, DIV CSS. , , .

Answer 3

AnApprentice, DIV CSS ( ), :

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>

#body_container ( ) . .data-content_lotsoftext .data-content_a .data-content_b (70px + 1px ), .data-content_lotsoftext - -content_c (25px + 1px ).

.data-content_lotsoftext, . display:inline ie6.

Firefox, Chrome, IE8, IE7 IE6 (IE6 7 ), - CSS, IE6 7, , !)

Hope this helps. Dan

Answer 4

The script you are describing is just not suitable for the table. Use a table only when displaying tabular data. You should use some other html elements to create your structure and style it with CSS.