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

Question

Can I prevent the user from highlighting one column in a table?

I have a 2-column table. Users will want to copy the content in the second column, but not the 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 a JSFiddle with an example: http://jsfiddle.net/vepq0e29/

When the user copies and pastes, I want the output to just be: line1 line2 line3 ... line7

I don't want col1 to show up or be highlighted when the user selects the table.

How can I make it so that users can only select and copy content from the second column?

Thanks!

score 5 · Answer 1 · answered Aug 16 '15 at 20:09

You can use pseudo-elements to show the text. Text from pseudo-elements is never copied at the moment (not sure, if it'll be 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>

score 2 · Answer 2 · answered Aug 16 '15 at 19:59

2

tr td:first-child {
  -webkit-user-select: none;  /* Chrome all / Safari all */
  -moz-user-select: none;     /* Firefox all */
  -ms-user-select: none;      /* IE 10+ */
  user-select: none;          /* Likely future */      
}

The user can't select the first column as long as he is not viewing the html source code. http://jsfiddle.net/vepq0e29/1/

answered Aug 16 '15 at 19:59

cre8

13,012
8
37
61

Thanks for your reply. While the first column isn't highlighted, if I copy and paste, the first column still shows up when I paste. – oxuser Aug 16 '15 at 20:06
Wrong. You don't allow to start or end the selection inside of first column. But if you select a few lines and copy them, the first column will be there too. – Qwertiy Aug 16 '15 at 20:06
You are right, I just checked if i can select it but not what happens when you copy it. – cre8 Aug 16 '15 at 20:07
This behaviour seems to be browser dependant: just tried it and with latest versions: Chrome and IE will paste the first column, but Firefox not. FireFox and Chrome will not hightlight first column, IE will... – Zimmi Aug 16 '15 at 20:11
@Qwertiy you found the best solution best solution by using css – cre8 Aug 16 '15 at 20:12

Irfan Anwar · Answer 3 · 2015-08-16T21:39:23.817

Please checkout this example, try yourself use Run Cde Snippet below and just select all rows in single column and then copy and paste in any editor and see results :)

Hope this will help

div.table {
  display: block;
  width: 100%;
}
div.td-outer {
  width: 48%;
  display: inline-block;
  border: 1px solid #00aaff;
  text-align: center;
  vertical-align: middle;
  height: 100%;
}
div.tr {
  display: block;
  text-align: center;
  height: 140px;
  vertical-align: middle;
}
div.td-inner {
  display: inline-block;
  border: 1px solid #ccc;
  width: 90%;
  vertical-align: middle;
  height: 95%;
  margin: 3px;
}
div.td-inner span {
  height: 95%;
  vertical-align: middle;
}

<div class="table">
  <div class="td-outer">
    <div class="tr">
      <div class="td-inner"> <span>
            col1
                    </span>

      </div>
    </div>
    <div class="tr">
      <div class="td-inner"> <span>
     col1
        </span>

      </div>
    </div>
  </div>
  <div class="td-outer">
    <div class="tr">
      <div class="td-inner"> <span>
        line1
        </span>

      </div>
    </div>
    <div class="tr">
      <div class="td-inner"> <span>
        line2
        </span>

      </div>
    </div>
  </div>
</div>

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

3 Answers3

Linked