HTML - 表を考えると、1列レイアウト

Question

を壊すことなく、流体とすることができるようにする方法は、私は次のようにあります

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

私は起こるしたい何この表はの可能性を100％に拡大するとのためであります外側DIV。問題は、ID = 'lotoftext'の内部にたくさんのテキストがあるテーブルが、テーブルを外側のdivより大きくしてページを分割してしまうことです。

アイデア？ありがとう

Answer 1

あなたはmax-widthを使用できますか？その特定のTDの中にdivを入れて、最大幅を与える必要があるかもしれません。

Answer 2

表形式のデータでない限り、DIVとCSSを使用して構築する必要があります。あなたはこのように頭痛の少ないものであなたが望むものを達成することができるはずです。

Answer 3

説明しているシナリオは、テーブルには適していません。表は、表形式のデータを表示する場合にのみ使用してください。構造体を構築しCSSでスタイルを設定するには、他の種類のhtml要素を使用する必要があります。

Answer 4

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の右余白はdata-content_c（安全側にある25px + 1px）の幅です。

.data-content_lotsoftextに幅を割り当てないと、自動的に全幅に伸びます。 display:inlineは、それがよりよくie6に座るのを助けます。 Firefoxで動作確認済み

は、クローム、IE8、IE7とIE6（IE6と7は少しグリッチある - 誰もがそれはIE6と7で完璧に動作させるためにCSSを絞り込む助けることができれば、大声で叫ぶしてください！）

希望します。 Dan