How to prevent text select but without adding newline on copy

Question

I have this simple HTML:

<pre class="background">
<table>
<tbody>
<tr><td class="line_no">0</td><td class="code_column"><span class="white">a</span></td></tr><tr><td class="line_no">1</td><td class="code_column"><span class="blue">b</span></td></tr></tbody>
</table>
</pre>

Formatted version for better readability:

<pre class="background">
<table>
    <tbody>
        <tr>
            <td class="line_no">0</td>
            <td class="code_column"><span class="white">a</span></td>
        </tr>   
        <tr>
            <td class="line_no">1</td>
            <td class="code_column"><span class="blue">b</span></td>
        </tr>
    </tbody>
</table>
</pre>

and this CSS:

<style> 
.background
{
    font-family:monaco,Consolas,LucidaConsole,monospace;
    background-color:#1E1E1E;
    overflow:scroll;
}

table
 {
    color:white;
    white-space:pre;
}
.line_no
{
    user-select:none;
}
.code_column
{
    padding-left:5px;
}
</style>

And the problem is copy behaviour:

When I use user-select: none and copy just a and b then there's additional newline between them which is not good

when I remove user-select: none then copy/paste works fine, but the problem is that I want to disable possibility of copying first column line_no

How can I solve that? preferably without having to add javascript

Answer 1

This helped me

https://stackoverflow.com/a/53675297/7927549

.line::before {
  content: attr(data-line-number);
  margin-right: 8px;
}

<div><span class="line" data-line-number="1"></span>line 1</div>
<div><span class="line" data-line-number="2"></span>line 2</div>
<div><span class="line" data-line-number="3"></span>line 3</div>