JSFiddle - React, Tailwind, and code Playground

HTML

<table border='1' align='center' style='text-align:center'>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
    <td>4</td>
    <td>5</td>
    <td>6</td>
  </tr>
  <tr>
    <td>7</td>
    <td>8</td>
    <td>9</td>
  </tr>
  <tr>
    <td>10</td>
    <td>11</td>
    <td>12</td>
  </tr>
  <tr>
    <td>13</td>
    <td>14</td>
    <td>15</td>
  </tr>
  <tr>
    <td>16</td>
    <td>17</td>
    <td>18</td>
  </tr>
</table>

CSS

table {
  outline: none;
  border-collapse: collapse;
  cursor: default;
}

td {
  padding: 5;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

td.selected {
  border: 2px solid red;
  cursor: pointer;
}

JavaScript

$(document).ready(function() {
  var table = $('table');
  var cells = table.find('td');
  var firstCorner, secondCorner, val;

  function getCellIndex(cell) {
    return {
      x: $(cell).index(),
      y: $(cell).parent().index()
    };
  }

  function getRangeFromCorners(firstCorner, secondCorner, axis) {
    var from, to;

    if (firstCorner[axis] < secondCorner[axis]) {
      from = firstCorner[axis];
      to = secondCorner[axis];
    } else {
      from = secondCorner[axis];
      to = firstCorner[axis];
    }

    to = ':lt(' + (to - from + 1) + ')';

    from = from > 0 ? ':gt(' + (from - 1) + ')' : '';

    return from + to;
  }

  function onSelectEnd() {
    cells.off('mouseover.selectRange');
    table.find('.selected')
      .removeClass('selected')
      .html(val);
  }

  cells.on('mousedown', function() {
    firstCorner = getCellIndex(this);
    secondCorner = getCellIndex(this);
    val = $(this).text();

    cells.on('mouseover.selectRange', function() {
      secondCorner = getCellIndex(this);

      var rangeX = getRangeFromCorners(firstCorner, secondCorner, 'x');
      var rangeY = getRangeFromCorners(firstCorner, secondCorner, 'y');

      cells.removeClass('selected');
      table.find('tr' + rangeY).each(function() {
        $(this).find('td' + rangeX).addClass('selected');
      });
    });

    $('body')
      .on('mouseup.removeCellListener', function() {
        $(this).off('mouseup.removeCellListener');
        onSelectEnd();
      })
      .on('mouseleave.removeCellListener', function() {
        $(this).off('mouseleave.removeCellListener');
        onSelectEnd();
      });
  });
});