Unselectable content/text within an 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>

The relevant 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 all (ctrl-a), what I expect to happen, only "one", "two", and "three" are selected and not the line numbers, happens. However, when I paste what's in the clipboard I get differing results:

Chrome output:

one
2 two
3 three

Firefox output:

one

two

three

So Chrome is copying every unselectable line except the first, and firefox is putting in an extra line where there shouldn't be one.

Current Chrome version is Version 54.0.2840.71 m and current firefox version is 49.0.2 (Both are able to use user-select: none; according to http://caniuse.com/#feat=user-select-none

Is a css solution to this currently possible?

Edit Please note that the table I'm receiving is being rendered by another library and I can really only manipulate the classes.

Answer 1

Is a css solution to this currently possible?

An HTML solution to this is possible:

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

Answer 2

@Rounin almost had it. Here's a modified version of what he made. It will show highlighting the 1-3 but it wont 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>