Nie można wybrać content/tekstu w tabeli HTML

Question

Mam następujące 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> 

Odpowiedni css:

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

Zarówno w Firefox i Chrome, jeśli wybiorę wszystko (Ctrl + A), to, czego się spodziewam, wybieram tylko "jeden", "dwa" i "trzy", a nie numery linii. Jednak, kiedy wklej co jest w schowku uzyskać różne wyniki: Wyjście

Chrome: wyjście

one 
2 two 
3 three 

Firefox:

one 

two 

three 

Więc Chrome kopiuje każdą Nie można wybrać linię z wyjątkiem pierwszego i firefox umieszcza dodatkową linię, gdzie nie powinno być.

wersja

Aktualny Chrome Wersja 54.0.2840.71 m, a obecna wersja Firefox 49.0.2 (obie są w stanie wykorzystać user-select: none; według http://caniuse.com/#feat=user-select-none

jest rozwiązaniem css to obecnie możliwe?

Edycja Należy pamiętać, że tabela Otrzymuję jest renderowany przez inną biblioteką i mogę naprawdę tylko manipulować klas.

Answer 1

Czy css tak lution do tego obecnie możliwe?

rozwiązanie

HTML, to jest możliwe:

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

Answer 2

można usunąć pierwszą kolumnę .code-table z

visibility: collapse; 

Następnie można wdrożyć ::before pseudo -element zawierający liczbę CSS er w drugiej kolumnie .code-table, aby rozwiązać ten 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>

Answer 3

@Rounin prawie miał. Oto zmodyfikowana wersja tego, co zrobił. Pokaże podświetlenie 1-3, ale nie będzie kopiować.

.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>