問題タブ [css-tables]

div タブ内にテーブルがあります。テーブルには 40 行あり、div の高さはそのテーブルの 10 行を表示するように設定されています。CSS の overflow:auto を使用すると、40 行をスクロールできます。すべて順調です。

JavaScript を使用して、テーブルをプログラムで特定の行に配置するにはどうすればよいですか (つまり、プログラムでテーブルを行ごとに上下にスクロールします)。

CSSでhtmlデータテーブルをレイアウトする必要があります。

表の実際の内容は異なる場合がありますが、常に 1 つのメイン列と 2 つ以上の他の列があります。メイン列の幅をその内容に関係なくできるだけ大きくし、他の列の幅をできるだけ小さくしたいと思います。内容が変更される可能性があるため、列の正確な幅を指定することはできません。

シンプルな意味的に有効なhtmlテーブルとcssのみを使用してこれを行うにはどうすればよいですか?

例えば：

おおよそ次のようにアイテムを並べたいと思います。

基本的に、テーブルのような構造に配置されたさまざまな長さのアイテム。注意が必要な部分は、これらのコンテナのサイズが異なる可能性があることです。各行にできるだけ多くのアイテムを収めたいと考えています。つまり、1 行にいくつのアイテムが収まるか、ページがサイズが変更されたアイテムは、対応するためにリフローする必要があります。たとえば、最初は各行に 10 個のアイテムが収まる可能性がありますが、サイズを変更すると 5 個に減る可能性があります。

列の数がわからないため（1行に収まる数がわからないため）、htmlテーブルを使用できるとは思いません。css を使用してそれらをフロートさせることはできますが、サイズがさまざまであるため、並べることはできません。

これまでのところ、私が考えることができる唯一のことは、JavaScriptを使用して最大のアイテムのサイズを取得し、すべてのアイテムのサイズをそのサイズに設定し、すべてをフロートさせることです。

より良い提案はありますか？

複雑な表ベースのレイアウトと、重複して無駄なタグが多数ある HTML ページがあるとします。たとえば、次のようになります。

ページをよりコンパクトな形式にリファクタリングするタスクを支援するツールはありますか? たとえば、CSS スタイルとセレクターを自動的に生成するツールはありますか? それはテーブルを div レイアウトに変換しますか?

問題の順序を理解するために、私が見ているページは 8000 行を超える HTML と JavaScript であり、画像を除いて 500Kb にもなります!

更新：再。「あきらめてゼロから始める」コメント。現実の世界では、それはどういう意味ですか？ページを印刷してスキャンし、Dreamweaver で背景画像として設定し、それから始めますか? 真剣に？それは本当にリファクタリングよりも効率的でしょうか?

更新: 私は「ゼロからトレースする」ことを中傷しているわけではありませんし、Dreamweaver が私の選択したツールであるとほのめかしているわけでもありません。レイアウトのリファクタリングが難しい問題だと考えられていることに、私は非常に驚いています。

要素<table/>を使用して列をフォーマットしようとしています。、など<col/>は設定できますが、 は設定できません。うまくいかないのはなぜですか？background-colorwidthfont-weight

ですから、アプリケーションが Firefox で問題なく動作していて、それを IE で開くと... いいえ、もう一度やり直してください。

私が抱えている問題は、CSS 表示プロパティをJavaScript でnoneまたはに設定していることです。table-cell

私は最初に を使用していましたが、Firefox はプロパティdisplay: blockなしでそれを奇妙にレンダリングしていました。table-cell

IE をテストするために JavaScript にハックを追加せずにこれを行いたいと思っています。助言がありますか？

ありがとう。

CSS では、表の border-spacing プロパティを使用して、表のセル間の間隔を指定できます。

ただし、これにより、列と行の間の間隔が均一になり、使用しているデザインが行間のギャップを要求するが、列ではなく、またはその逆になる状況が増えています。

無地の背景がある場合は、背景色と同じ色の境界線を使用して間隔をシミュレートできます。

また、(たとえば) div をすべてのテーブル セルの最初の子にし、パディングまたはマージンを使用して目的の結果を得ることができますが、スタイルに対応するためだけに多くの余分なマークアップが必要です。

私が表示しているデータが表形式のデータであることを考えると、表を使用してこのスタイルを実現する賢明な方法はありますか?

私はデザイナーと<div>いうよりもプログラマーであり、テーブルを使用するのではなく s を採用しようとしていますが、行き詰っています。

これが私がやろうとしていることです。アンケートページを開設しています。各質問のテキストを青い div の上部に配置し、長すぎる場合は折り返します。すべての赤い div をコンテナー div の右上隅に並べたいと思います。

レイアウト http://img528.imageshack.us/img528/4330/divsforsurveyop2.jpg

これが私が始めたことです。フレームの幅が 420 ピクセルを超えている限り、問題なく動作します。次に、赤い div は次の行にスキップします。間違ったアプローチをしたのではないかと思います。おそらく、物事を右に浮かせるべきでしょうか?

float: left左のアイテムを使用して、同じ行に2つのアイテムを配置したい。

私はこれを一人で達成するのに何の問題もありません。問題は、ブラウザのサイズを非常に小さく変更しても、2 つの項目を同じ行に表示したいということです。ご存知のように、テーブルの場合と同様です。

目標は、右のアイテムが何があってもラップしないようにすることです。

CSS を使用してブラウザに、内容をdivラップするよりも引き延ばして、divfloat: right;がfloat: left; div

私が欲しいもの:

@page 内のプロパティを使用して CSS で、テーブルが複数のページにまたがる場合、すべてのページでテーブル ヘッダー (th) を繰り返す必要があると言うことができますか?