ie7またはie6でtdの幅を超える内容をfloatにして以下のtdに表示する方法_html/css

<html><body style="font:16px Arial;"><style type="text/css">.table {	border-collapse: collapse;	table-layout: fixed;	font: normal 11px arial;}.row {	height:25px;}.cell {	background-color:#ECF4FE;	font-family:Arial,Verdana,sans-serif;	font-size: 11px;	border-bottom-width: 1px;	border-bottom-color: #ECF4FE;	border-bottom-style: dotted;	border-top: none;	border-left: 1px solid #EC0000;	border-right: 1px solid #EC0000;	vertical-align: middle;	padding-left: 3px;	padding-right: 3px;}</style><div style="width: 250px"><table width="100%" class="table">  <tr class="row">    <td class="cell">      <div style="white-space:nowrap;">Text Text Text Text Text Text Text Text</div>    </td>    <td class="cell">    </td>    <td class="cell">    </td>    <td class="cell">    </td>    <td class="cell">    </td>  </tr></table></div></body></html>

ログイン後にコピー

タイトルと上記のコードのように、ie7 標準モードで。

ケース 1:
テーブルに table-layout:fixed; スタイルがある場合、ページに表示される上記のコードの効果は

ケース 2:
テーブルに table-layout:fixed; スタイルがない場合。スタイル、上記のコードページに表示される効果は

明らかに、どちらの結果も理想的ではありません。
私の現在のニーズでは、全体的なデザイン要素により、table タグでの table-layout:fixed; が必須です。ただし、その後ろの各セルのセルを超えてコンテンツを表示する必要があります。ケース2のように最初のセルを直接広げることはできません。理想的な効果は次のとおりです

上記の理想的な効果は現在、IE 7 を除く IE 8、Firefox、Chrome、Safari、Opera、そしておそらく IE 6 で実現されています。

心優しい人々からのアドバイスは忘れてください。

ディスカッションへの返信 (解決策)

これは単純すぎます。固定を使用せず、絶対を使用してください

さらに、テーブルにはジャンクコードが多すぎます。。このスタイルは実際には非常に簡素化できます。。

うわー

上の階、テーブルの存在に何の意味があるの？．．

上の階、テーブルの存在に何の意味があるの？．．

これについては私も知りません。LZ に聞いてください

重要なのは、その機能が実現できるということです。

IE9 によって渡される、position:relative を追加します

.table {
ボーダー折りたたみ: 折りたたみ;
フォント: 通常の 11 ピクセル
}
.row {
高さ: 25 ピクセル }
背景色:#ECF4FE ; : Arial、Verdana、サンセリフ;
フォントサイズ: 11px;
ボーダーボトムカラー: #ECF4FE;
ボーダートップ: n 1;
ボーダー左: 1px ソリッド #EC0000;
パディング左: 3 ピクセル
}

ポスターのフォームは完全に背景です

ポスターのフォームは完全に背景です
時代は変わり、この煩わしいブラウザの互換性の問題に対処する必要はなくなりました。このテーブルは間違いなく背景ではなく、投稿用に特別に作成された写真であると記憶しています。

Tableレイアウトの使用は良くないと思うので、もっとdivを使用したいと思っています

ie7またはie6でtdの幅を超える内容をfloatにして以下のtdに表示する方法_html/css_WEB-ITnose

ディスカッションへの返信 (解決策)