HTML如何创建一个超链接覆盖多个表格单元格

Question

我有一个非常简单的HTML表格，只有一行和两个单元格。第一个单元格有一个超链接，应该覆盖两个单元格。我该如何让我的超链接覆盖表格的第二个td？

这是我的HTML代码：

<table>
  <tr>
    <td style="width:100px;padding:0">
      <a href="yes.htm" style="padding-top:0;padding-bottom:0;padding-left:5px;padding-right:5px;position:relative;top:0;left:0;right:0;display:block;margin:0;box-sizing:content-box;height:22px;line-height:22px;">Yes</a>
    </td>

    <td style="width:30px;padding:5px">Oh yeah</td>
  </tr>
</table>

现在我的超链接只覆盖了第一个td，但没有覆盖第二个。有什么办法可以解决吗？

我不想使用JavaScript。我也不想将链接复制到两个表格单元格中。

- xms

---

你能把a标签复制到第二个td里吗？JavaScript是一个选项吗？ - Victory

不，我不能在这里复制或使用JavaScript。 - xms

Answer 1

作为每个 td 中的链接并不是一个好的选择，而使用 js 有点肮脏，这里提供另一种基于 HTML/CSS 的方法来解决问题:

HTML:

<div class="table">
<a class="table-row" href="/mylink">
    <div class="table-cell">...</div>
    <div class="table-cell">...</div>
    <div class="table-cell">...</div>
</a>

CSS:

.table { display:table; }
.table-row { display:table-row; }
.table-cell { display:table-cell; }

这里有一个可用的 JSFiddle。

个人而言，我更喜欢在每个 td 中放置一个单独的链接，指向相同的 URL，以保持简单。

<table>
    <tr>
        <td>
            <a href="http://url/stuff">
                First column
            </a>
        </td>
        <td>
            <a href="http://url/stuff">
                Second column
            </a>
        </td>
    </tr>
</table>

- Gerard Simpson

---

有更多的CSS代码用于链接悬停，因此在悬停时背景颜色将会改变。换句话说，单独的链接不如可能的工作得那么好... - xms

我提供的第二个解决方案只是我更喜欢做的事情的一个示例。请参考第一个解决方案，以便你可以在两个<td></td>标签周围有一个单独的<a></a>标签。基本上这里发生的是，我正在将这些<div></div>标签样式化为表格元素，以便它们可以被包裹在一个单独的<a></a>标签中。 - Gerard Simpson

Answer 2

    <table style="position: relative">
  <tr>
    <td style="width:100px;padding:0">
      <a href="yes.htm" style="position: absolute; width: 100%">Yes</a>
    </td>

    <td style="width:30px;padding:5px">Oh yeah</td>
  </tr>
</table>

通过将链接设置为绝对路径，您可以将其从所在的层中拉出来，并通过将其宽度设置为100，使链接扩展到下一个TD元素。

为了防止锚标签溢出，给表格相对位置以限制绝对元素的表格宽度。

这里有一个 JSFiddle。

- calcazar