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。我不想将链接复制到两个表格单元格。

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>

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

HTML超链接，涵盖几个表格单元格

2 个答案: