HTML超鏈接覆蓋幾個表格單元

我有一個非常簡單的HTML表格，它有一個行和兩個單元格。第一個單元格有一個應該覆蓋這兩個單元格的超鏈接。我怎麼才能讓我的超鏈接覆蓋我桌子的第二個td？HTML超鏈接覆蓋幾個表格單元

這裏是我的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。我不想將鏈接複製到兩個表格單元格。

來源

2016-12-06 xms

您可以複製標籤進入第二TD？ JavaScript是一個選項？ – Victory

不，我不能在這裏複製或使用JavaScript。 – xms

在每個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

人盟友，我寧願把一個單獨的鏈接指向同一個URL每個TD，讓事情變得簡單：

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

來源

2016-12-07 00:08:18

有更多CSS代碼用於鏈接懸停，因此在懸停時會更改背景顏色。換句話說，單獨的鏈接不能儘可能地工作...... – xms

我提供的第二種解決方案僅僅是我希望做的一個例子。請參閱第一個解決方案，以便您可以在兩個標籤附近生成一個標籤。基本上這裏發生的是我將這些

標籤設計爲表格元素，以便它們可以包裝在一個標籤中標籤 –

<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

來源

2016-12-09 19:22:14 calcazar

HTML超鏈接覆蓋幾個表格單元

回答

相關問題