HTMLテーブルの選択できない列

Question

複数の列を持つ表があります。個々の列の内容を個別に選択する必要があります。最初の列の選択を開始すると、2番目、3番目...が自動的に選択されます。 1つの列を選択すると、他の列を選択不可にしたい。

私は要素の次のクラスを適用しようとしましたが、それはFFでうまくいきました。どこから選択を開始するかは決して選択できません。 IEの場合

.unselectable { 
    user-select: none; /* CSS3 */ 
    -moz-user-select: none; 
    -khtml-user-select: none; 
} 

私は選択が外部に開始した場合、それはまだ選択可能で、Internet Explorerで、unselectable="on"というプロパティを試してみました。私は特定の列の選択が外部から始まっても選択を防止したい。

私はonselectionstartとonmouseoverを使用しようとしましたが、要素の外側で選択が開始されているため、トリガーされません。

私は希望がありますか？

ありがとうございます。

Answer 1

私は今のところ純粋なCSSソリューションはないと考えています。

奇妙に聞こえるかもしれませんが、元の列の上にpositioned: absolutelyとなる別の表に選択する列の内容を複製できます。

Answer 2

SCOPE属性を持つTHを含めると役立つことがあります。それはうまくいくとは言えませんが、それはより意味のあるテーブルになります。 CSSは属性をフックすることができるので、DOMソリューションはそれほど遠くにあることはできません。

Answer 3

代わりに車輪の再発明の...これがあるhttp://www.datatables.net/

チェックアウトするjQueryのテーブルプラグインで、あなたの靴下をたたき落とすます。

あなたのやりたいことを既にしているようで、無料です。