問題タブ [css-tables]

新しく再設計されたWebサイトのCSSやテーブルで問題が発生しています。よく知られている「100％divの高さ」の問題のため、私はWebサイトの構造要素としてテーブルを使用することにしました。したがって、次のようになります。

HTMLマークアップ：

および対応するCSS

ここでの問題は、明らかに右側のtdが特定のブラウザでまったく表示されないことです（これはMacとIEの古いインスタンスで見られます）。これはCSSの問題ですか、それともテーブルの問題ですか？

角が丸くなるようにテーブルのスタイルを設定する必要があります。

私はちょうどそれについて最善の方法を見ています：

通常、角を丸くする div のスタイルを設定するときは、上部と下部に空のコメントがある 2 つの div を使用し、サイズ変更と背景画像の CSS をそれらに適用します。

ただし、テーブルには内部境界線があるため、実際のセル境界線と一致するように、隅の背景画像の垂直線を慎重に揃える必要があります。

ここまでは明らかですか？

だから私は他の人がこれにどのようにアプローチするのか疑問に思っていました. 私ができる最善のことは、1 つの完全な固定サイズの背景画像、境界線などを使用し、その上に境界線のないテーブルをオーバーレイすることだと思います。結局、テーブルは常に同じサイズになります。

誰かがより良い方法を考えることができますか?

「ペインの固定」を有効にしたときに、Excel のように最初の行と最初の列の両方がロックされたテーブルを作成するにはどうすればよいですか? 水平方向と垂直方向の両方にスクロールするテーブルが必要です (これには多くのソリューションが存在しますが、垂直方向のスクロールのみが可能です)。

したがって、テーブルを下にスクロールしても、最初の行には列見出しがあるため、そのままの状態になります。これはthead、解決を容易にするものは何でも、最終的には になるかもしれませんし、そうでないかもしれません。

右にスクロールすると、行のラベルが保持されているため、最初の列はそのまま残ります。

これは CSS だけでは不可能だと確信していますが、JavaScript ソリューションを教えてくれる人はいますか? すべての主要なブラウザーで動作する必要があります。

ブラウザウィンドウの中央に固定幅のテーブルを表示したい。今私は使用します

ただし、VisualStudio2008では次の行に警告が表示されます。

属性'align'は古くなっていると見なされます。新しい構成をお勧めします。

同じレイアウトを取得するには、どのCSSスタイルをテーブルに適用する必要がありますか？

プロジェクトでは、特定の幅の列を含むテーブルを、テーブル行ごとに 1 つの HTML 行 (折り返しなし) でレンダリングする必要がありました。各テーブル セルには、上下に 1 ピクセル、左右に 2 ピクセルのパディングが必要です。クロスブラウザで動作することを思い付くことができる最良の方法は、次のように、テーブル内の td 内に div を配置することです。

余分な div を追加する必要をなくしたいと考えています。この問題をグーグルで検索するのに何時間も費やしましたが、代替手段が見つかりません。

余分な div を追加せずに必要なことを行う方法はありますか? もしそうなら、それは何ですか?

テーブルをまったく使用せずに目的の結果を得る方法はありますか?

明らかに、奇数/偶数行の実際のスタイルは CSS クラスを介して行われますが、クラスを行に「アタッチ」する最良の方法は何ですか? マークアップに入れる方が良いですか、それともクライアント側のJavaScriptを介して行う方が良いですか? どちらが優れているのか、その理由は?

簡単にするために、これが 100 行の大きなテーブルであり、配色が奇数行と偶数行が交互になっていると仮定します。さらに、これを簡単に実行できる何らかの JavaScript ライブラリがページの他の場所で必要になるため、そのパッケージのオーバーヘッドは問題になりません。

---

この質問の本当の目的は、どのようなトレードオフが関係しているのか、またそれらのトレードオフをどのように処理する必要があるのか​​を判断することです。たとえば、ページが負荷の下でヒットした場合 (動的テーブルを想定)、帯域幅がヒットした場合のサーバーへのパフォーマンス ヒットなどです。接続速度が遅いユーザー向けに、HTML に追加のレイアウト コードを追加することによるセマンティック ヒット (ここでの考え方は、HTML はコンテンツ用、CSS はレイアウト用、javascript はコンテンツの動作方法とレイアウトの制御/拡張用です)

を取得して<ul><li>、CSS でスタイルを設定する素敵なテーブルにするのが好きです。

jQueryで変換するのが好き

延々と....

の最初の行で表の見出しを作成し、他の行で<ul>表のセルを作成します...

ページにはおそらく 4 ～ 5<ul>秒が表示されます。

ケーキにアイシングを追加するには、稼ぎの多いものから少ないものへと並べ替えましょう!

---

私はこの質問を見つけました：

HTMLテーブルをJQueryでリストに変換するには?

それは正反対です...しかし、おそらく良いスタートですか？わかりません、調べてみます...しかし、まだ質問は広く未解決のままです。

---

私はこの質問を見つけました：

HTMLテーブルをJQueryでリストに変換するには?

それは正反対です...しかし、おそらく良いスタートですか？わかりません、調べてみます...しかし、まだ質問は広く未解決のままです。

---

ソリューションに関連する別の質問...

を「削除」してテーブルに置き換えたい場合..

空のテーブルを作るのは好きではありません..

ここにコードがあります...おそらく「最適化」されていませんが、動作します

何か良いですか？

---

いいえいいえいいえ、質問/回答になり、プラグインが素晴らしいので...しかし、もう機能しません...

ここにバグがあります...クリックイベントがトグルのときにプラグイン（tablerize）を呼び出し、UL全体をテーブルで置き換えるのが好きです...それはしません

コードの小さなスニペットは次のとおりです。

驚くべきことではありませんが、うまくいきません..私は確かに何かを台無しにします...そして私は運が悪いのでプラグインを微調整します!...

私はそのコードを保持するのが本当に好きです:

それは次のようになります。

div も必要ですか？

ヘルプ！

---

うまくいきません。これが完全なページです。おそらく、それが何をすべきかを確認するのに大いに役立ちます

http://www.acecrodeo.com/new/04-classement.php

データがそこにあることを確認するためだけに、遅延を使用して非表示にします...

タイトルを押した後..テーブル化が発生し、古いulを削除してテーブルに置き換え、スライドトグルします

---

わかりました..現在の状態があります...

回答を編集して投稿することしかわかりません...更新ボタンはどこにもありません..

高く評価したり、評価に役立つ何かを提供したいのですが...方法がわかりません

問題について...私はあなたが私に与えたものを正確に投稿しました..そしてそれは機能しません...リンクを見てみましょう：http://www.acecrodeo.com/new/04-classement.php

ここにバグがあります：ヘッダーを切り替えます...

私はとても迷っています！

行を並べる必要がある表形式のデータを表示するために単純な TABLE を使用していますが、テーブルの内容を選択する場合は、ユーザーが各列内で選択できるようにしたいだけです。デフォルトのブラウザーの動作は、すべての列で行として選択することですが、何らかの方法で列内のみを選択できるようにする必要があります。

テーブルを行ではなく列として定義する新しい CSS または XHTML 1.0 の方法があれば、ブラウザーはテーブル内で強制的に選択できることを期待していました。これはおそらく不可能であり、ブラウザーの選択をオーバーライドするための JavaScript 選択方法を構築する必要があることを認識しています。明らかに、Google スプレッドシートのような JavaScript スプレッドシート ウィジェットでは、必要に応じて行と列内で選択できますが、プロトタイプに基づいて構築されたグリッド タイプのウィジェットを見つけるか、独自の機能を記述したいと考えています。

この列選択が組み込まれたウィジェットへのヒントやリンクはありますか? このようなものを機能させるための HTML/CSS トリックはありますか?

テーブル内の特定の行の周りに境界線を配置できる HTML/CSS を設計しようとしています。はい、レイアウトにテーブルを使用することを実際に想定していないことはわかっていますが、それを完全に置き換えるだけの十分な CSS をまだ知りません。

とにかく、複数の行と列を持つテーブルがあり、いくつかはrowspanとcolspanとマージされており、テーブルの一部の周りに単純な境界線を置きたい. 現在、4 つの個別の CSS クラス (上、下、左、右) を使用して<td>、テーブルの上、下、左、右に沿ったセルにそれぞれアタッチしています。

私がやりたいことをする簡単な方法はありますか？上と下をaに適用しようとしました<tr>が、うまくいきませんでした。（ps私はCSSを初めて使用するので、おそらくこれには本当に基本的な解決策がありますが、見逃しています。）

注:複数の境界セクションが必要です。基本的な考え方は、それぞれが複数の行を含む複数の境界クラスターを持つことです。