HTML-Hyperlink zur Abdeckung mehrerer Tabellenzellen

Question

Ich habe eine sehr einfache HTML-Tabelle, die eine Zeile und zwei Zellen hat. Die erste Zelle hat einen Hyperlink, der beide Zellen umfassen sollte. Wie kann ich meinen Hyperlink bekommen, um den zweiten Tag meines Tisches zu decken?

Hier ist mein HTML-Code:

<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> 

Jetzt ist mein Hyperlink deckt nur die erste td, aber nicht die zweite. Was könnte getan werden?

Ich möchte kein JavaScript verwenden. Ich möchte die Verknüpfung zu beiden Tabellenzellen nicht kopieren.

Answer 1

als ein Glied in jedem td keine gute Alternative ist und js verwendet, ist ein bisschen schmutzig, hier ist eine andere HTML/CSS-Ansatz:

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; } 

Hier ist ein funktionierendes JSFiddle

Person Verbündeter, würde ich es vorziehen, einen separaten Link in jeder td zu setzen, die auf den gleichen URL verweist, Dinge einfach zu halten:

<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> 

Indem der Link absolute Sie es aus ihm der Ebene ziehen und indem Bei einer Breite von 100 erstreckt sich die Verbindung zum nächsten TD-Element.

Um zu verhindern, dass die Ankervariable überläuft, geben Sie der Tabelle eine relative Position, um das absolute Element auf die Tabellenbreite zu beschränken.

Hier ist ein JSFiddle