javascript - How can I make only one column of a table selectable? -

can prevent user highlighting 1 column in table?

i have 2-column table. users want copy content in second column, not first column.

<table>     <tr>         <td>col1</td>         <td>line1</td>     </tr>     <tr>         <td>col1</td>         <td>line2</td>     </tr>     <tr>         <td>col1</td>         <td>line3</td>     </tr> </table> 

here's jsfiddle example: http://jsfiddle.net/vepq0e29/

when user copies , pastes, want output be: line1 line2 line3 ... line7

i don't want col1 show or highlighted when user selects table.

how can make users can select , copy content second column?

thanks!

you can use pseudo-elements show text. text pseudo-elements never copied @ moment (not sure, if it'll changed sometime).

http://jsfiddle.net/vepq0e29/3/

td:first-child:after {      content: attr(aria-label);  }

<table>      <tr>          <td aria-label="col1"></td>          <td>line1</td>      </tr>      <tr>          <td aria-label="col1"></td>          <td>line2</td>      </tr>      <tr>          <td aria-label="col1"></td>          <td>line3</td>      </tr>      <tr>          <td aria-label="col1"></td>          <td>line4</td>      </tr>      <tr>          <td aria-label="col1"></td>          <td>line5</td>      </tr>      <tr>          <td aria-label="col1"></td>          <td>line6</td>      </tr>      <tr>          <td aria-label="col1"></td>          <td>line7</td>      </tr>  </table>