Prevent table column from being selected and copied in Safari and Firefox?

Question

I'm working on what is basically a small utility that displays a piece of sourcecode in a table which has two columns, one for line numbers and one for the actual source.

I found that you can prevent the appearance of text being selected with the following CSS:

table th {
 -moz-user-select: none;
 -webkit-user-select: none;
}

Unfortunately this doesn't work. While the text appears not to be selected, if you copy and paste is will still copy it.

So is there actually a way to do this?

Answer 1

All of your line numbers should reside within a single td in a single tr. If you create one tr for every line, you will be unable to prevent the copying of the line numbers.

See the source of this page: http://pastie.org/561138 for an example.

Answer 2

Have you tried putting them in a separate div and floating it?

I also just found this, uses jQuery to do it for you. You could use it, or you could take it apart and figure out how it displays it, and then use that.

Answer 3

What is selected depends on order in the DOM tree. Therefore, you need to place your source display before or after the html that displays line numbers. Putting the source and line numbers in separate divs and floating your elements is probably the easiest way to accomplish this.

Answer 4

A solution to your problem can be found here:

http://stackoverflow.com/questions/465526/line-numbering-and-copy-paste-html-css