HTML - 给定一个表，如何允许一个列是流畅的，不打破布局 [英] HTML - Given a Table, how to allow one column to be fluid without breaking the layout

问题描述

我有以下：

 < div style =width：100％;> 
 
< table> 
< tr> 
< td style =width：30px;> hi< / td> 
< td style =width：40px;> hi< / td> 
 
< td id =lotoftextstyle =width：auto; white-space：nowrap; overflow：hidden;> LOTS在此处的文本，LOTS< / td& 
 
< td style =width：25px;> hi< / td> 
< / tr> 
< / table> 
 
< / div> 
  

我想要发生的是这个表增长到100％的外部DIV。问题是，表中有很多文本，ID ='lotoftext'导致表增长到大于外部div的宽度，然后打破页面。

任何想法？感谢

解决方案

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>大量的文字在这里！< / 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 它会自动拉伸到全宽。

在Firefox，Chrome，IE8，IE7和IE6（测试版）中测试。 display：inline IE6和7是有点毛病 - 如果任何人可以帮助细化CSS，以使它在IE6和7完美工作，请大声出来！）

希望这有助于。
Dan

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

Hope this helps. Dan

这篇关于HTML - 给定一个表，如何允许一个列是流畅的，不打破布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！