0

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

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

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

4

3 に答える 3

1

意味がわかりませんが、1 つの列を他の列とは異なる色にできるようにしたいようです。最も簡単な方法は、colgroup および col タグを使用することです。

CSS

.name {width:5em;background:#ccc;}
.value {width:3em;text-align:center;color:#f00;}
.comment {text-align:right;}

HTML

<table>
<caption>My Test Table</caption>
<col class="name">
<colgroup class="value" span="3"></colgroup>
<col class="comment">
</colgroup>
<tr>
<th>Name</th>
<th>Value 1</th>
<th>Value 2</th>
<th>Value 3</th>
<th>Comment</th>
</tr>
<tr>
<td>Bob</td>
<td>Yes</td>
<td>No</td>
<td>42</td>
<td>I like cheese</td>
</tr>
<tr>
<td>Susan</td>
<td>No</td>
<td>Yes</td>
<td>42</td>
<td>Sharp Cheddar</td>
</tr>
</table>

http://www.webmasterworld.com/forum83/6826.htmから盗まれたコード

列に設定できる CSS プロパティのサブセットのみがあります。W3C にはそれらのリストがあります。

于 2009-03-16T12:06:56.597 に答える
1

ユーザーがテーブルをクリックしたときに列のみを強調表示したい場合は、jqueryを使用して簡単に行うことができます

$("table td").bind('click',function(){
            $("table td").css('background','');
            $(this).css('background','green');
         });
于 2009-03-16T12:31:26.570 に答える
1

colgroup タグを使用します - http://www.w3schools.com/tags/tag_colgroup.asp

列全体に任意のスタイルを適用できます。列内でマウスが移動/クリックしたときにスタイルを変更することは、jquery で行うことができます...ここで他の回答のスクリプトを使用できますが、「table td」セレクターを「table colgroup」に置き換えます。

于 2009-03-16T13:43:08.597 に答える