セルが空でない場合にのみ、テーブルとそれに含まれるセルに境界線があることを確認する方法はありますか? テーブルのすべてのセルが空の場合、境界線は表示されません。
6 に答える
empty-cells CSS プロパティを参照してください。
純粋な CSS でこれを行う唯一の方法は、最新のブラウザーに依存しています。これを行うには、CSS の高度なセレクターを使用する必要があります。たとえば、 tr:empty を使用して、子要素が含まれていないセルを見つけることができます。プレーン テキストの場合は、さらに多くの操作が必要になります。
残念ながら、これらは CSS3 にしか存在しないため、JavaScript を使用できない場合やマークアップに触れない場合は、最新のブラウザーでしか実行できません。
CSS3 セレクターの詳細については、ここをクリックしてください。
strager によって提案された empty-cells プロパティがうまくいくようです。必要なことができない場合は、jQueryのような巧妙な JavaScript ライブラリを使用することを検討します。このセルのコンテンツが変更されたときに、セルの境界線スタイルを getBorderStyle(this) に更新するフックを設定できます。
ここでjqueryの「変更」フックを見てください:http://docs.jquery.com/Events/change すべてのセルを選択し(cssセレクターを使用して実行できます)、変更フックを追加して、作成した関数を実行する場合updateBorder() などと呼ばれる、あなたは良いはずです。私はそれが次のようなものになると想像します:
$("table.someClass td").change(function() { updateBorder(this) })
セルの境界線のレンダリングは、境界線を折りたたんでいるかどうかに部分的に依存しています。それらが折りたたまれていない場合、セルの内容がない場合、境界線はデフォルトで表示されません。これは、CSS プロパティのempty-cellsを使用して切り替えることができます。
境界線を折りたたむと、セルのコンテンツの存在に基づいて境界線の表示を制御する機能が失われます。
空のセルに 1 つのクラス名を付け、空でないセルに別のクラス名を付けます。1 つのクラスは境界線を指定し、もう 1 つのクラスは指定しません。
私の知る限りでは、これは CSS の機能の範囲内ではありません。私が考えることができる最良のオプションは、データの入力中にサーバー側のコードを介して、またはページが読み込まれた後に JavaScript を介してクラスを動的に適用することです。ブラウザ。