I have the following HTML table:

    th,
    td {
      border: 1px solid black;
    }

  <table>
    <thead>
      <tr>
        <th>Column 1</th>
        <th>Column 2</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Row 1, Column 1</td>
        <td>Row 1, Column 2</td>
      </tr>
      <tr>
        <td>Row 2, Column 1</td>
        <td>Row 2, Column 2</td>
      </tr>
      <tr>
        <td>Row 3, Column 1</td>
        <td>Row 3, Column 2</td>
      </tr>
      <tr>
        <td>Row 4, Column 1</td>
        <td>Row 4, Column 2</td>
      </tr>
    </tbody>
  </table>

I have the following HTML table:

    th,
    td {
      border: 1px solid black;
    }

  <table>
    <thead>
      <tr>
        <th>Column 1</th>
        <th>Column 2</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Row 1, Column 1</td>
        <td>Row 1, Column 2</td>
      </tr>
      <tr>
        <td>Row 2, Column 1</td>
        <td>Row 2, Column 2</td>
      </tr>
      <tr>
        <td>Row 3, Column 1</td>
        <td>Row 3, Column 2</td>
      </tr>
      <tr>
        <td>Row 4, Column 1</td>
        <td>Row 4, Column 2</td>
      </tr>
    </tbody>
  </table>

If I click and drag to select content in column 2, the text highlighting spans both columns like this:

How do I configure my table so the users can click/drag content to select all the text in a column, instead of the rows?

I'm trying to achieve the same functionality as this:

• html
• css

• This question is similar to: CSS Make user text selection vertically in table. If you believe it’s different, please edit the question, make it clear how it’s different and/or how the answers on that question are not helpful for your problem. – imhvost Commented Mar 26 at 21:39

1 Answer 1

Drag any item you want.

let btnStatus="LDOWN";
let tableCELL = document.querySelectorAll('.tbcls td');

function mouseEVENTS(){
for(let x=0;x<tableCELL.length;x++){
tableCELL[x].addEventListener('mousedown',function(){ btnStatus="LDOWN";userSelectNONE(this); });
tableCELL[x].addEventListener('mouseup',function(){ btnStatus="RELEASED"; });
tableCELL[x].addEventListener('mouseenter',function(){ userSelect(this); });
}
}

function userSelect(el){
if(btnStatus=="LDOWN"){
el.style.userSelect="auto";
}
}

function userSelectNONE(el){
for(let x=0;x<tableCELL.length;x++){tableCELL[x].style.userSelect="none";}
el.style.userSelect="auto";
}

  mouseEVENTS(); 

th,td {
      border: 1px solid black;
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
  user-select: none; /* Standard syntax */
    }

<table class="tbcls">
    <thead>
      <tr>
        <th>Column 1</th>
        <th>Column 2</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Row 1, Column 1</td>
        <td>Row 1, Column 2</td>
      </tr>
      <tr>
        <td>Row 2, Column 1</td>
        <td>Row 2, Column 2</td>
      </tr>
      <tr>
        <td>Row 3, Column 1</td>
        <td>Row 3, Column 2</td>
      </tr>
      <tr>
        <td>Row 4, Column 1</td>
        <td>Row 4, Column 2</td>
      </tr>
    </tbody>
  </table>