<table>
  <thead>
    <tr>
      <td>Name</td>
      <td>Some hard to select id</td>
      <td>Long text</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="user-select-all">
        Dag
      </td>
      <td class="user-select-all">
        sdfshdf$s6sdf%766d#6d7dg
      </td>
      <td class="user-select-all">
        Danish chupa chups gummies pie. Cake pudding bear claw sugar plum bear
        claw chocolate cupcake I love. Caramels marzipan caramels cake
        liquorice.
      </td>
    </tr>
    <tr>
      <td class="user-select-all">
        Cupcake
      </td>
      <td class="user-select-all">
        3ff3&s6ddfd#dg%dfdf
      </td>
      <td class="user-select-all">
        Danish chupa chups gummies pie. Cake pudding bear claw sugar plum bear
        claw chocolate cupcake I love. Caramels marzipan caramels cake
        liquorice.
      </td>
    </tr>
  </tbody>
</table>
table td {
  user-select: all;
  cursor: cell;
}














/*example styling*/
table{
  border-collapse:collapse;
}
td{
  border:1px solid black;
  padding:5px;
}
function userSelectAll(event) {
    window.getSelection()
      .selectAllChildren(
        event.target
      );
}


if(!CSS || CSS.suports || !CSS.supports("user-select", "all")){
  var elementsToSelectOnClick = document.querySelectorAll(".user-select-all");
  for(var i = 0; i < elementsToSelectOnClick.length; i++){
    elementsToSelectOnClick[i].onclick = userSelectAll;
  }
}

  

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.