How to disable drag of `<a>` element when dragging a horizontal scrollbar?

Question

I have an HTML table, wrapped in a div, wrapped in an anchor element so that the entire table links to an external URL. The div has a fixed with, and has overflow-x: auto so that it scrolls horizontally.

When I click and drag the horizontal scrollbar, it starts to move the content horizontally, but then it starts dragging the entire anchor element.

Is there any way to disable this with just HTML or CSS? This is being rendered in an email so I can't use JS.

For example, HTML:

<a href="http://example.com" >
  <div>
    <table>
      <tr>
        <th>Header1</th>
        <th>Header2</th>
        <th>Header3</th>
        <th>Header4</th>
        <th>Header5</th>
        <th>Header6</th>
      </tr>
      <tr>
        <td>Data1</td>
        <td>Data2</td>
        <td>Data3</td>
        <td>Data4</td>
        <td>Data5</td>
        <td>Data6</td>
      </tr>
    </table>
  </div>
</a>

And CSS:

div {
  width: 200px;
  overflow-x: auto;
}

Answer 1

If I understand the problem correctly, you can make the parent of all of the HTML elements you've added here a <p> element, and that should stop the clicking of the scroll bar from acting as if the entire thing is a link:

div {
  width: 200px;
  overflow-x: auto;
}

<p>
  <a href="http://example.com" >
    <div>
      <table>
        <tr>
          <th>Header1</th>
          <th>Header2</th>
          <th>Header3</th>
          <th>Header4</th>
          <th>Header5</th>
          <th>Header6</th>
        </tr>
        <tr>
          <td>Data1</td>
          <td>Data2</td>
          <td>Data3</td>
          <td>Data4</td>
          <td>Data5</td>
          <td>Data6</td>
        </tr>
      </table>
    </div>
  </a>
</p>