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: /

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!

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/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!

• javascript
• jquery
• html
• css

3 Answers 3

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

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/vepq0e29/1/

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>