开发者

HTML - Given a Table, how to allow one column to be fluid without breaking the layout

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


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


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.


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!)

HTML - Given a Table, how to allow one column to be fluid without breaking the layout

Hope this helps. Dan


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.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜