問題タブ [css-tables]

テーブルの高さを設定し、セルがテーブルよりも大きい場合はセルを個別にスクロールできるようにしたいと考えています。

次のコードを検討してください: (実際の動作はこちら)

このコード (私の場合は IE8) を開くと、ブラウザーを最大化したときに 2 番目のセルが表にうまく収まることに気付くでしょう。理論的には、ブラウザーを縮小すると (テーブルも強制的に縮小されます)、テーブルが小さすぎてすべてのコンテンツが収まらなくなると、2 番目のセルの内側に垂直スクロールバーが表示されます。heightしかし実際には、CSS属性 によって設定された境界を超えて、テーブルが垂直方向に拡大するだけです。

うまくいけば、私はこのシナリオを適切に説明しました...

これを機能させる方法を知っている人はいますか？

複数のdivが埋め込まれているWebページがあり、テーブルの行数が多すぎると問題が発生します。その場合、含まれているdivが不足し、代わりに下部のdivが背景の上に表示されます。

これをトラブルシューティングする方法に関するヒントはありますか？運が悪かったので、さまざまなdivにいくつかの属性を設定しようとしましたか？

このページのような、横方向に並べられたテーブル セルを作成したいと考えています。

私は指示に従い、cssとマークアップを逐語的にコピーしましたが、何をしてもIE 8はテーブルセルをブロックとしてレンダリングします（互いに隣り合うのではなく、互いに積み重ねられます）。

CSS:

マークアップ:

私は通常、標準のブラウザベースのコンテンツに960コンテナとともにCSSルールを使用margin:0 autoしますが、HTMLメールの作成は初めてであり、標準のCSSを使用せずにブラウザウィンドウの中央に配置したい次のデザインがあります。 。

http://static.helpcurenow.org/mockups/emails/2010/may-survey/survey.html

メールテーブルのデザインを外側のテーブルにラップし、ボディにwidth:100%インラインスタイルを使用するなどして、それを実現できることをどこかで思い出したようです。text-align:center

このためのベストプラクティスはありますか？

divを使用してサイトを構成し、display：tableプロパティ（display：tr、display：tr）を適用する利点は何ですか。これは、divがtrおよびtd要素とまったく同じように動作することを意味しませんか？

レイアウトにテーブルやテーブルの動作を使用するべきではないことはわかっていますが、違いと利点があるかどうかだけが気になりますか？

これは基本的なものだと確信しています:)次のcssを含むWebページがあります

次に、サイズを 64*56 に設定して imagebutton コントロール (asp.net) を配置します。IE7 では、これは完全に機能し、黒い境界線が私のイメージを満たしています。

ただし、IE8 では、画像の下部に約 5 ピクセルのギャップがあり、テーブルのサイズが大きくなり、見栄えが悪くなります。互換モードのオン/オフを切り替えると、この問題が明らかになります。

それを修正する方法についてのアイデア: エミュレートを使用せずに!

タ。

DIVにボーダー付きのリストテーブルを作成したいです。列の幅のコンテンツが増えると、改行と境界が増加しますが、他の列の境界は増加しません。例を参照してください。

div ベースの CSS テーブル

誰でもこの問題を解決できますか？

20 行 10 列のテーブルを作成しました。2 つの列ごとにグリッド線を作成したいと思います。

したがって、2 列目と 3 列目の間には、それらを区切る線があります。また、4 列目と 5 列目、6 列目と 7 列目、8 列目と 9 列目を区切る線も必要です。

しかし、1 列目と 2 列目、3 列目と 4 列目などを線で区切りたくありません。

CSSでこれを行う方法はありますか？列の個々のセルに左罫線を作成しようとしましたが、列の下に実線が表示されません。

どんな助けでも大歓迎です。

なぜそのテーブルがそのように表示されているのかを理解しようとしています。つまり、すべての列をテーブルフレームの全幅を占めるように設定する方法は?

テーブルを作成する関数は次のとおりです。

次のコードは、ChromeまたはIEで正しく表示されます（画像の幅は200ピクセルです）。FirefoxとOperaでは、max-widthスタイルは完全に無視されます。なぜこれが発生し、適切な回避策がありますか？また、ほとんどの標準に準拠しているのはどちらの方法ですか？

ノート

この特定の状況で考えられる回避策の1つは、に設定max-widthすること200pxです。ただし、これはかなり不自然な例です。可変幅コンテナの戦略を探しています。

[アップデート]

以下のmVChrで述べられているように、 w3.org仕様には、要素max-widthには適用されないと記載されています。inlineを使用してみましdiv img { max-width: 100%; display: block; }たが、問題が修正されていないようです。

[アップデート]

私はまだこの問題の解決策を持っていません。ただし、問題を解決するために次のjavascriptハックを使用しています。基本的に、上記の状況を再現し、ブラウザがmax-width内でサポートしているかどうかを確認しますdisplay: table-cell。（データURIを使用すると、余分なhttpリクエストを防ぐことができます。以下は3x3 bmpです。）