問題タブ [html-table]

編集 - 元のタイトル:border-collapse:collapseで達成する別の方法はありCSSますか?

表の境界線を単純に折りたたむだけでは根本的な問題は解決しないことが判明したため、議論をより反映するようにタイトルを更新しました。

プロパティを使用して角の丸いテーブルを作成しようとしてCSS3 border-radiusいます。私が使用しているテーブル スタイルは次のようになります。

これが問題です。border-collapse:collapseプロパティも設定したいのですが、設定すると機能しborder-radiusなくなります。border-collapse:collapse実際に使用せずに同じ効果を得ることができる CSS ベースの方法はありますか?

編集:

ここで問題を示す簡単なページを作成しました(Firefox/Safari のみ)。

td問題の大部分は、テーブルの角を丸くするように設定しても、コーナー要素の角に影響しないことにあるようです。テーブルがすべて 1 色の場合、これは問題にはなりませんtd。最初の行と最後の行で、それぞれ上隅と下隅を丸くするだけでよいからです。ただし、見出しとストライプを区別するためにテーブルに異なる背景色を使用しているため、内側のtd要素も角が丸くなっています。

提案されたソリューションの概要:

角が丸い別の要素で表を囲むことはできません。表の四角い角が「にじみ出る」からです。

境界線の幅を 0 に指定しても、テーブルは折りたたまれません。

tdセル間隔をゼロに設定した後も、下隅はまだ正方形です。

代わりに JavaScript を使用すると、問題が回避されます。

可能な解決策：

テーブルは PHP で生成されるため、外側の th/tds のそれぞれに異なるクラスを適用し、各コーナーを個別にスタイルすることができます。あまりエレガントではなく、複数のテーブルに適用するのは少し面倒なので、私はむしろこれをやりたくないので、提案を続けてください.

考えられる解決策 2 は、JavaScript (具体的には jQuery) を使用してコーナーのスタイルを設定することです。このソリューションも機能しますが、まだ探しているものとはまったく異なります (私は好き嫌いがあることを知っています)。2 つの予約があります。

1. これは非常に軽量なサイトであり、JavaScript を最小限に抑えたいと考えています
2. 境界半径を使用することの魅力の一部は、優雅な劣化と漸進的な強化です。すべての角を丸くするために border-radius を使用することで、CSS3 対応のブラウザーでは一貫して丸みを帯びたサイトになり、他のブラウザーでは一貫して正方形のサイトになることを願っています (IE のことです)。

今日 CSS3 でこれを行うのは不必要に思えるかもしれませんが、それには理由があります。また、この問題は w3c 仕様の結果であり、CSS3 のサポートが不十分であるため、CSS3 がより広くサポートされている場合でも、どのような解決策も関連性があり、有用であることを指摘しておきます。

_{(出典: sontag.ca )}

パートI

このレイアウトは、2 つの HTML テーブル (一方が他方の内部にネストされている)、または 1 つのテーブルで非常に簡単に行うことができます。

CSS を使用することもできますが、もう少し考えなければならない場合があります。

これは実際のレイアウトではないかもしれませんが、似たようなページを見たことがあります。これはなぞなぞだと考えてください。CSS スキルを磨くための演習です。

物事をもう少し面白くするために、私はThe Challengeと呼ばれる小さな 2 部構成の Web ページに質問をまとめました。コードと質問を調べます:テーブルまたは CSS を使用したレイアウト? 、並んで、一撃一撃で、2人の対戦相手がコードの覇権をめぐって戦います。

パート I では、The Challengeがどのようにして誕生したかを説明します。楽しんでいただければ幸いです。

パート II は決定です。 あなたは驚くかもしれません。

パート II

投稿してからわずか数分で、本当に良い回答がすぐに表示されたことに驚きました。それは謙虚な経験でした。タイムトライアルであなたと競争する気はありません。

しかし、そうは言っても、提供されたソリューションを詳しく調べたところ、CSS ソリューション (当時の私自身のものも含む) のどれも、提供されたテーブル ソリューションほどうまく機能しないことに気付きました。課題は、どのようなレイアウト ソリューションにおいても、CSS がテーブルよりも優れているということでした。

そこで、3 つの新しいルールを追加しました (ルールの 1 つは、ルールを変更できるということです)。これは一部の人々を悩ませました。それで、ルールが変更された理由について、カラフルな説明を追加しました。これは彼らをさらに苛立たせたと思います。

1. 私たちの庭はフェンスで囲まれています。それが自分自身を見つけるかもしれないどんな悲惨な環境からもそれを際立たせるための何か。高価ではありませんが、清潔に保つのは簡単です。だから私は庭の周りに1ピクセルの黒い境界線が欲しい
2. 各庭の区画 (キャラクター) の住人は、庭で最も優れているかどうかに応じて、黒または白のいずれかでなければなりません。また、それらはすべて筆記体です。それらの間に斜体はありません。;-)
3. 庭は再配置可能です。つまり、この庭をページのどこにでも置くことができます (絶対配置はありません)。

最終的な出力は次のようになります (背景色はオプションです)。

_{(出典: sontag.ca )}

気まぐれで土壇場でのルール変更についてお詫び申し上げます。間違えました。各庭園区画の住民は、職人、手作りの専門家です。彼らは筆記体の子孫であり、そのスタイルのセンスはイタリック体のおかげです。

両方の種類の庭 (テーブルと CSS) が同じページに共存する必要があるため、庭は再配置可能でなければなりません。position:absoluteルールは許されないと言うのは間違っているかもしれません。このコンテキストでそれらを機能させることができれば、より多くの力が得られます. 彼らは確かに受け入れられます。

私たちが育てているいくつかの花の色に非常に似たオレンジ色の背景を持つ田園地帯にそれぞれの庭のタイプが植えられるので、私はプロットの周りにフェンスを求めました.

私は今オランダに住んでいて、チューリップの季節が近づいています。今後数週間でオランダ上空を飛行し、晴れた日 (ここでは珍しいことです) の場合、下の風景はこのばかげた演習にかなり似ています。

私はオレンジ色に夢中というわけではありませんが、オランダ人が好きで、尊敬しています。:-)

パート III

この画像とともに、The Challenge からのTed のテーブルの回答を以下に掲載しました。

_{(出典: sontag.ca )}

CSS ルールに触れることなく、居住者をガーデン プロットに簡単に追加できるため、すべてが自動的に中央に配置されます。

CSS でこれを行うことはできますか？ニシンで森の中で一番強い木を切り倒すことができますか?

更新:チャーリーの答えはこちらです。

4 列と複数行の巨大なテーブルを持つ html ファイルがあります。最初の 2 つの列が 1 つの領域に表示され、他の 2 つの列がそれに隣接する別の領域に表示されるように、asp 2.0/3.5 ページに表示したいと考えています。テーブルを 2 つに分割して表示するようなもの。それを達成する方法はありますか？

ここで初めて質問します。

私はテーブルを中心に構築したサイトを持っています。良くないことはわかっていますが、それは完了しています。Firefox では問題ないように見えますが、IE ではテキストがあちこちに表示されます。

リンクはhttp://www.mothershipinc.com 警告:音楽が含まれています

インデックス ページのコードは次のとおりです。

行の表示をオフにしてギャップを削除する最良の方法は何ですか? 逆に、可視性をオンにすると、可視行が再び表示されるようになります。

現在、次の jQuery スクリプトを使用してテーブル内の行を強調表示していますが、うまく機能しています。

これは、各行が真に新しいレコードであるデータのテーブルではうまく機能しますが、2 行のデータを使用するレコードがあり、jQuery を変更して次のようにレンダリングするという問題に遭遇しました。

3行ごとに「alt1」のクラスを持ち、4行ごとに「alt2」のクラスを持つようにしたいjQueryでこれをどのように達成しますか?

列ヘッダーが画面上で固定され、最初の列が固定されたままデータとともにスクロールされるように、長い HTML テーブルを表示する CSS/JavaScript 手法はありますか。

テーブルの内容をスクロールできるようにしたいのですが、常に上部に列ヘッダーが表示され、左側に最初の列が表示されるようにします。

素晴らしい jQuery プラグインがあれば! それが役立つ場合、私が気にかけている唯一のブラウザーは Firefox です。

フォーム タグで囲まれたデータのテーブルを用意します。ページの下部には、固定されたフッターがあります。

テーブルが空の場合 (テーブル ヘッダーのみが表示されている場合)、フッター全体が画面から半分右に移動します。

何か案は？

CSS: