Unselected columns in an HTML table

Question

I have a table with multiple columns. I want the contents of each column to be selected individually. When I start selecting the first column, the second, third ... is automatically selected. When I select one column, I want other columns to be inaccessible.

I tried applying the following class to elements and it worked fine in FF. No matter where you start the selection, you can never choose it.

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

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

I tried using onselectionstart and onmouseover, but as the selection starts outside the element, they don't start.

Do I have any hope?

Thanks in advance.

Answer 1

I believe that at the moment there is no pure CSS solution.

This may seem odd, but you can clone the contents of the column that you want the user to select a separate table that will be positioned: absolutely on top of the original column.

Answer 2

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

This is a jQuery table plugin that will disable your socks.

It looks like he is already doing what you would like to do, and it's free.

Answer 3

This can help enable TH with the SCOPE attribute. I can’t say that this will work, but it makes a more semantic table. CSS can include an attribute, so a DOM solution cannot be that far.