Non-selectable columns in HTML table

Question

I have a table with multiple columns. I want content of each column to be selected individually. When I start selecting first column, second, third ... are automatically getting selected. When I select one column I want make other columns non selectable.

I have tried applying following class on elements and it worked fine in FF.No matter where you start selection from, its never selectable.

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

For IE I have tried property called unselectable="on", In Internet Explorer, it is still selectable if the selection starts outside. I want to prevent selection of certain columns even selection starts from outside.

I have tried using onselectionstart and onmouseover but as the selection is starting outside of element these are not getting triggered.

Do I have any hope ?

Thanks in advance.

Answer 1

I believe that for now there is no pure CSS solution.

It may sound weird, but you could clone the content of the column you want the user to select into a separate table that will be positioned: absolutely over the original column.

Answer 2

Instead of reinventing the wheel... check out http://www.datatables.net/

This is a JQuery table plug-in that'll knock your socks off.

It looks like it is already doing what you would like to do and it is free.