テーブル列の動的オーバーフロー - x？

Question

すべての列が設定された幅でテーブルを作成しようとしていますが、最後の列は未定義の幅です。最後の欄には、スクロール可能にしたい設定幅でより多くのコンテンツを持つ別のテーブルがあります。

高解像度のユーザーの場合、すべてのコンテンツが表示されます。小さな解像度のユーザーの場合は、最後の列のコンテンツをスクロール可能にします。私が作成しようとしています何の

例：

View full screenshot

私の現在のコード：

<style> 
table { 
    border-collapse:collapse; 
} 

td { 
    font-family:arial; 
    font-size:11px; 
    text-align:center; 
    border:1px solid #cccccc; 
    height:50px; 
    vertical-align:middle; 
} 

table.innertable td { 
    background-color:#eeeeee; 
    border-top:0; 
    border-bottom:0; 
    border-left:0; 
} 

</style> 

<table cellspacing="0" border="0" cellpadding="0" style="width:100%;"> 

<tr> 
    <td style="width:100px;">&#8592; 100 px &#8594;</td> 
    <td style="width:200px;">&#8592; 200 px &#8594;</td> 
    <td style="width:200px;">&#8592; 200 px &#8594;</td> 
    <td style="width:200px;">&#8592; 200 px &#8594;</td> 
    <td>&#8592; The rest of the space &#8594;</td> 
</tr> 

<tr> 
    <td style="width:100px;">&#8592; 100 px &#8594;</td> 
    <td style="width:200px;">&#8592; 200 px &#8594;</td> 
    <td style="width:200px;">&#8592; 200 px &#8594;</td> 
    <td style="width:200px;">&#8592; 200 px &#8594;</td> 
    <td> 
     <div style="overflow-x:scroll;"> 
     <table cellspacing="0" border="0" cellpadding="0" class="innertable"> 
     <tr> 
     <td style="width:200px;">&#8592; 200 px &#8594;</td> 
     <td style="width:200px;">&#8592; 200 px &#8594;</td> 
     <td style="width:200px;">&#8592; 200 px &#8594;</td> 
     </tr> 
     </table> 
     </div> 
    </td> 
</tr> 

</table> 

Answer 1

何の幅を制限することについてはどうですか？

http://jsfiddle.net/PTjqL/4/ < - これに似ています。

EDIT：変更は<div style="overflow-x:scroll; width: 200px;">です。私はdivの幅を制限しました。あなたがそれを制限しないなら、可能な限り最大サイズをカバーし、オーバーフロー-xは決してしません）。

Answer 2

EDIT - ChromeとFF8ではうまく動作するように見えますが、 IEのバージョンの。

しかし、IE conditionalを使用してIEを検出し、小さなJavascriptを使用してビューポートサイズを検出し、要素を適切に変更することができます（そしてwindow.resizeハンドラを追加してください）。だからすべてが失われていない...

EDIT 2 - まあ、MSDN @media docsはうまくいくはずです。たとえば、ほぼ同じ例があります。うーん...

EDIT 3 - 質問からand (max-width:1280px)を削除すると、IE9ではテキストが青色に変わります。私はそれがうまくいく/動作するはずだと思うが、何か他のことが起こっている（おそらく、奇妙なモードが引き起こされている？）。

---

このは仕事にだが、私は確かにすべてのブラウザとバージョンがそれをサポートするかどうかが不明です。しかし、これは、ビューポートが< 1280pxであるときにdiv#scrollableにoverflow: scrollを追加することです。下のリンクを自分のブラウザウィンドウで開くと（FF8を使ってテストしています）、幅を変更しようとすると、青のテキストがオンとオフになり、オーバーフローが追加されて取り除かれます。いくつかの例とまともな説明については

、以下を参照してください

Using media queries with @import and @media

CSSメディアクエリ

<style type="text/css"> 

/* This is what I added as far as the conditional style. 
    Note, the blue text is only for effect. */ 

@media only screen and (max-width:1280px) { 
    .innertable td { 
     color: blue !important; 
    } 
    #scrollable { 
     overflow-x: scroll !important; 
    } 
} 

table { 
    border-collapse:collapse; 
} 

td { 
    font-family:arial; 
    font-size:11px; 
    text-align:center; 
    border:1px solid #cccccc; 
    height:50px; 
    vertical-align:middle; 
} 

table.innertable td { 
    background-color:#eeeeee; 
    border-top:0; 
    border-bottom:0; 
    border-left:0; 
} 
</style> 

HTML変更

<!-- Note the ID attribute --> 
<div id="scrollable"> 
    <table cellspacing="0" border="0" cellpadding="0" class="innertable"> 
    <tr> 
     <td style="width:200px;">&#8592; 200 px &#8594;</td> 
     <td style="width:200px;">&#8592; 200 px &#8594;</td> 
     <td style="width:200px;">&#8592; 200 px &#8594;</td> 
    </tr> 
    </table> 
</div> 

http://jfcoder.com/test/mediaquery.html