2009-07-12 11 views
1

HTMLテーブルのすべてのセルをクリック可能にしたい、つまり、セル内の任意のポイントからアンカータグからのリンクをアクティブにしたいとします。キャッチは、セルに内容がないことです。 HTML表を使用して、各セルの背景を色付けして量を視覚的に表現しています。セルにはアンカータグが含まれていますが、アンカータグの間には内容はありません。HTMLテーブルで「空の」セルをクリック可能にする

以下は、テーブルの3つの例です。最初の表では、セルの次元は定義されていません。 2番目の表では、最小寸法が定義されています。 3番目の表では、幅と高さが明示的に定義されています。各表の最初の行の最初のセルには、単純なピリオド文字が入ります。 1番目と2番目の表では、そのセルだけがクリック可能であることに注意してください。明示的に高さと幅を設定しないようにしたいので、最初の2つのテーブルのいずれかを変更して3番目のテーブルのクリック可能な動作に合わせることができれば、それは素晴らしいでしょう。アンカータグには改行しないスペース( )を置くことができますが、もう1つ、より洗練されたソリューションがありますか?

<html> 
<head> 
    <style> 
    td.min {min-width: 1px; min-height: 1px;} 
    td.defined {width: 50px; height: 50px;} 
    td a.fullcell {width: 100%; height: 100%; display: block;} 
    </style> 
</head> 
<body> 
    <h1>No dimension defined</h1> 
    <table border="1"> 
    <tr> 
     <td>1</td> 
     <td>2</td> 
     <td>3</td> 
    </tr> 
    <tr> 
     <td>A</td> 
     <td bgcolor="#ffbbbb"><a class="fullcell" href="#">.</a></td> 
     <td bgcolor="#bbffbb"><a class="fullcell" href="#"></a></td> 
    </tr> 
    <tr> 
     <td>B</td> 
     <td bgcolor="#bbffbb"><a class="fullcell" href="#"></a></td> 
     <td bgcolor="#ffbbff"><a class="fullcell" href="#"></a></td> 
    </tr> 
    </table> 
    <h1>Min-dimension defined</h1> 
    <table border="1"> 
    <tr> 
     <td class="min">1</td> 
     <td class="min">2</td> 
     <td class="min">3</td> 
    </tr> 
    <tr> 
     <td class="min">A</td> 
     <td class="min" bgcolor="#ffbbbb"><a class="fullcell" href="#">.</a></td> 
     <td class="min" bgcolor="#bbffbb"><a class="fullcell" href="#"></a></td> 
    </tr> 
    <tr> 
     <td class="min">B</td> 
     <td class="min" bgcolor="#bbffbb"><a class="fullcell" href="#"></a></td> 
     <td class="min" bgcolor="#ffbbff"><a class="fullcell" href="#"></a></td> 
    </tr> 
    </table> 
    <h1>Dimensions defined</h1> 
    <table border="1"> 
    <tr> 
     <td class="defined">1</td> 
     <td class="defined">2</td> 
     <td class="defined">3</td> 
    </tr> 
    <tr> 
     <td class="defined">A</td> 
     <td class="defined" bgcolor="#ffbbbb"><a class="fullcell" href="#">.</a></td> 
     <td class="defined" bgcolor="#bbffbb"><a class="fullcell" href="#"></a></td> 
    </tr> 
    <tr> 
     <td class="defined">B</td> 
     <td class="defined" bgcolor="#bbffbb"><a class="fullcell" href="#"></a></td> 
     <td class="defined" bgcolor="#ffbbff"><a class="fullcell" href="#"></a></td> 
    </tr> 
    </table> 
</body> 
</html> 

答えて

5

この問題に関する興味深い記事(部分的に)hereがあります。

私は個人的には& nbspに行きます。ルート:これは(異なるブラウザで)比較的一貫した動作を引き起こし、今日では非常に一般的に使用されています。

もう1つ質問があります。本当にレイアウト用のテーブルが必要ですか(この表データですか)?

+0

はい、私たちは 経路に行くと思います。富化グループの遺伝子発現の対照と値があります。すべてのコントラストやグループごとに価値があります。しかし、これらの値はテキストではなく色として表示されます。したがって、表は、データをレイアウトする正しい方法でも、そうでないこともあります。ニースのリンクも。 – gotgenes

6

CSS:

table { empty-cells: show; } 

それがnot supported in IEです。 &nbsp;は、下位互換性のための最良の賭けです。

+0

互換性の問題だけでなく正しいCSSを指摘するためによくできました。 – Noldorin

+0

私にとって、Firefox 3.0.11では、これはセルをクリック可能にする要求された動作を与えません。 – gotgenes

+0

セルには何かしますが、それは問題ではないように見えるクリックイベントハンドラなしでは、セルはクリック可能(テキスト選択以外)はありません。 – cletus

関連する問題