拖动水平滚动条时如何禁用“<a>”元素的拖动？

Question

我有一个 HTML table，包裹在 div 中，包裹在锚元素中，以便整个 table 链接到外部 URL. div 有一个固定的，并且有 overflow-x: auto 以便它水平滚动。

当我点击并拖动水平滚动条时，它开始水平移动内容，但随后开始拖动整个锚元素。

有什么方法可以仅使用 HTML 或 CSS 来禁用此功能吗？这是在电子邮件中呈现的，所以我不能使用 JS。

例如，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>

和CSS：

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

Answer 1

如果我对问题的理解正确，您可以将您在此处添加的所有 HTML 元素的父元素设为 <p> 元素，这应该会停止单击滚动条从表现得好像整个事情都是 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>

拖动水平滚动条时如何禁用“<a>”元素的拖动？

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

html

css

html-email