解決できないスタイルの問題については、本当に助けが必要です。
シナリオ：
Web アプリケーション内に、エントリのリストを視覚化するテーブルがあります。列の 2 つは、「overflow:hidden;」を使用し、「text-overflow:ellipsis」を適用して表示用に切り刻んだ、より長いコンテンツを取ることができます。すべてのテーブル セルのコンテンツはスパンにラップされるため、テーブルにデータを入力しながらアニメーションを適用できます。大丈夫だ。
ここで、テーブルのレイアウトを以前の固定スタイルからより流動的な動作に変更したいと考えています。
テーブル列の幅設定を修正する前に。2 つの列を除くすべての列について、省略記号スタイルで切り刻まれた列の 1 つであっても、固定幅を維持します。もう 1 つは 100% の幅を取得するため、テーブルは利用可能なコンテナー全体を消費し、流動的なスタイル (「常に画面全体を使用する」) を提供します。列には、その内容と、必要に応じて埋め込むために使用される空白が表示されます。
望ましい動作:
ウィンドウのサイズが小さくなると、テーブルが縮小することを期待しています。これは、列セットの幅を 100% に減らすことで明らかに発生するはずです。これは、固定長のない唯一の列であるためです。その部分は、セルのコンテンツが収まる限り機能します。ウィンドウが狭くなり、コンテンツが収まらなくなるとすぐに、ブラウザーによってスクロールバーが適用されます。これは私が望むものではありません。代わりに、省略記号スタイルのルールでそのセルのコンテンツを切り刻んで、テーブルが実際に小さくなり、おそらく最小幅になるようにしたいと考えています。
テストケース：
HTML:
<div>
<table>
<tr>
<td class="c1"><span class="ellipsis">Alfreds Futterkiste</span></td>
<td class="c2"><span class="ellipsis">Maria Anders</span></td>
<td class="c3"><span class="ellipsis">Germany</span></td>
</tr>
<tr>
<td class="c1"><span class="ellipsis">Laughing Bacchus Winecellars</span></td>
<td class="c2"><span class="ellipsis">Yoshi Tannamuri</span></td>
<td class="c3"><span class="ellipsis">Canada</span></td>
</tr>
<tr class="alt">
<td class="c1"><span class="ellipsis">Königlich Essen</span></td>
<td class="c2"><span class="ellipsis">Philip Cramer</span></td>
<td class="c3"><span class="ellipsis">Germany</span></td>
</tr>
</table>
</div>
CSS:
table{table-layout:fixed;width:100%;border:solid gray 1px;}
/*table{table-layout:auto;width:100%;border:solid gray 1px;}*/
tr{}
td{}
td.c1{width:100%;}
td.c2{width:6em;}
td.c3{width:4em;}
/* formatting the clipped output */
.ellipsis{display:block;overflow:hidden;white-space:nowrap;text-overflow: ellipsis;width:inherit;}
/* just for the test case */
div{display:block;width:90%;margin:1em;background-color:silver;}
span{padding:2px;width:inherit;}
あなたが遊んでみるために、私はそのテストケースでフィドルを用意しました: http://jsfiddle.net/UgYFs/3/
ウィンドウの幅 (または左下の「結果」コンパートメントの幅) を小さくすると、どのように機能するかがわかります。これは私が望む動作です。
問題：（したがって、この質問...）
これは、「table-layout:fixed;」でのみ機能します。ある程度は理にかなっていますが、このオプションを使用できない理由があります。実際のアプリケーションでは、テーブルの行が動的に挿入されます。これは固定レイアウトでは機能しません。少なくとも光学的な結果はまったく異なります (これも理にかなっています)。したがって、好きか嫌いかは別として、「table-style:table」(デフォルト) を使用する必要があると思います。2行目のコメントを外すことで、CSSコンパートメントでそれに切り替えることができます。これにより、テーブルレイアウトが変更されます。動作が変化することがわかります。
私の質問：
両方を組み合わせる方法はありますか：
- 説明および実証されたとおりの望ましい動作を得る
- レイアウトを固定せずにテーブルを埋める（後でレイアウトを切り替える可能性があります）？
今まで私は成功できませんでした。しかし、私はこのスタイリッシュな Web のすべてについてまったくの初心者です...