web-dev-qa-db-ger.com

wie erstelle ich eine Zelle aus einem Tabellen-Hyperlink?

Wie kann die gesamte Tabellenzelle ohne Javascript oder JavaScript in HTML verlinkt werden?

Ich habe versucht, href in td tag selbst zu setzen, aber es funktioniert zumindest in chrom 18 nicht

<td href='http://www.m-w.com/dictionary/' style="cursor:pointer">
19
vaichidrewar

Versuche dies:

HTML:

<table width="200" border="1" class="table">
    <tr>
        <td><a href="#">&nbsp;</a></td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
</table>

CSS:

.table a
{
    display:block;
    text-decoration:none;
}

Ich hoffe es funktioniert gut.

31
Kamal

Versuchen Sie es so:

<td><a href="..." style="display:block;">&nbsp;</a></td>
17
azawaza

Einfach mit Onclick-Funktion und einem Javascript-Link:

<td onclick="location.href='yourpage.html'">go to yourpage</td>

12
Philip

Ich habe auch nach einer Lösung gesucht und diesen Code gerade auf einer anderen Site gefunden:

<td style="cursor:pointer" onclick="location.href='mylink.html'">link</td>

Warum kombinieren Sie nicht die Onclick-Methode mit dem <a>-Element im <td> für die Sicherung für Nicht-JS? Scheint super zu funktionieren.

<td onclick="location.href='yourpage.html'"><a href="yourpage.html">Link</a></td>
1
shootz

Probleme:

(User: Kamal) Es ist ein guter Weg, aber Sie haben das vertikale Ausrichtungsproblem vergessen! Auf diese Weise können wir den Link nicht genau in die Mitte des TD - Elements setzen! auch bei vertikaler Ausrichtung: Mitte;

(User: Christ) Ihre Antwort ist die beste Antwort, denn es gibt kein Alignment-Problem und auch heute ist JavaScript für jeden erforderlich ... es ist in jedem Bereich sogar in einem alten Smartphone ... und das ist es standardmäßig aktivieren ...

Mein Vorschlag zur Vervollständigung der Antwort von (Benutzer: Christus):

HTML:

<td style="cursor:pointer" onclick="location.href='mylink.html'"><a class="LN1 LN2 LN3 LN4 LN5" href="mylink.html" target="_top">link</a></td>

CSS:

a.LN1 {
  font-style:normal;
  font-weight:bold;
  font-size:1.0em;
}

a.LN2:link {
  color:#A4DCF5;
  text-decoration:none;
}

a.LN3:visited {
  color:#A4DCF5;
  text-decoration:none;
}

a.LN4:hover {
  color:#A4DCF5;
  text-decoration:none;
}

a.LN5:active {
  color:#A4DCF5;
  text-decoration:none;
}
1
Mahdi Jazini

Hier ist meine Lösung:

<td>
   <a href="/yourURL"></a>
   <div class="item-container">
      <img class="icon" src="/iconURL" />
      <p class="name">
         SomeText
      </p>
   </div>
</td>

(WENIGER)

td {
  padding: 1%;
  vertical-align: bottom;
  position:relative;

     a {
        height: 100%;
        display: block;
        position: absolute;
        top:0;
        bottom:0;
        right:0;
        left:0;
       }

     .item-container {
         /*...*/
     }
}

Auf diese Weise können Sie noch einige Eigenschaften von Tabellenzellen wie vertical-align nutzen. (Getestet auf Chrome)

1
amp

Ich habe das schon einmal gesehen, wenn Leute versuchen, einen Kalender zu erstellen. Sie möchten die Zelle miteinander verknüpfen, möchten jedoch nichts anderes mit ihr in Kontakt bringen. Versuchen Sie es und das könnte Ihr Problem lösen.

<tr>
<td onClick="location.href='http://www.stackoverflow.com';">
Cell content goes here
</td>
</tr>
0
Jason