Inappropriate Content / Text in HTML Table

Question

I have the following html:

<table class="code-table hljs"> <tbody> <tr class="code-row"> <td class="line-number unselectable">1</td> <td class="code-col">one</td> </tr> <tr class="code-row"> <td class="line-number unselectable">2</td> <td class="code-col">two</td> </tr> <tr class="code-row"> <td class="line-number unselectable">3</td> <td class="code-col">three</td> </tr> </tbody> </table> 

Corresponding css:

 .unselectable { -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } 

In both Firefox and Chrome, if I select everything (ctrl-a) that I expect, only "one", "two" and "three" will be selected, not line numbers. However, when I paste what is on the clipboard, I get different results:

Chrome output:

 one 2 two 3 three 

Firefox Output:

 one two three 

So, Chrome copies every non-selectable line except the first one, and firefox places an extra line where it should not be.

The current version of Chrome is version 54.0.2840.71 m, and the current version of firefox is 49.0.2 (Both can use user-select: none; according to http://caniuse.com/#feat=user-select-none

Is a css solution currently possible?

Edit Please note that the table that I get is displayed by another library, and I can only manipulate these classes.

Answer 1

Is a css solution currently possible?

Perhaps an HTML solution for this:

 <ol> <li>one</li> <li>two</li> <li>three</li> </ol> 

Answer 2

@ Runin almost had it. Here was a modified version of what he did. It will show selection 1-3, but it will not copy.

 .unselectable { -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; visibility: hidden; display: block; } .code-table { counter-reset: code-table; } .code-table tr td:nth-of-type(2)::before { counter-increment: code-table; content: counter(code-table) ' \00a0\00a0'; } 

 <table class="code-table hljs"> <tbody> <tr class="code-row"> <td class="line-number unselectable">1</td> <td class="code-col">one</td> </tr> <tr class="code-row"> <td class="line-number unselectable">2</td> <td class="code-col">two</td> </tr> <tr class="code-row"> <td class="line-number unselectable">3</td> <td class="code-col">three</td> </tr> </tbody> </table> 

Answer 3

You can remove the first column of .code-table with

 visibility: collapse; 

Then you can expand the ::before pseudo-element containing the CSS counter in the second .code-table column to solve this problem:

 .code-table { counter-reset: code-table; } .code-table tr td:nth-of-type(1) { visibility: collapse; } .code-table tr td:nth-of-type(2)::before { counter-increment: code-table; content: counter(code-table) ': '; } 

 <table class="code-table hljs"> <tbody> <tr class="code-row"> <td class="line-number unselectable">1</td> <td class="code-col">one</td> </tr> <tr class="code-row"> <td class="line-number unselectable">2</td> <td class="code-col">two</td> </tr> <tr class="code-row"> <td class="line-number unselectable">3</td> <td class="code-col">three</td> </tr> </tbody> </table>