Come può un'intera cella di tabella essere linkata in html senza javascript o jquery?come creare una cella di collegamento ipertestuale da tavolo
ho cercato di mettere href nel tag td sé, ma la sua non funziona, almeno in cromo 18
<td href='http://www.m-w.com/dictionary/' style="cursor:pointer">
Prova questo:
HTML:
<table width="200" border="1" class="table">
<tr>
<td><a href="#"> </a></td>
<td> </td>
<td> </td>
</tr>
</table>
CSS:
.table a
{
display:block;
text-decoration:none;
}
Spero che funzionerà bene.
sì, è il modo migliore ma hai dimenticato il problema dell'allineamento verticale! usando in questo modo non possiamo mettere il link esattamente al centro dell'elemento td ... provalo tu stesso ... con style = "display: block;" e senza style = "display: block;" Penso che forse il modo JavaScript sia migliore perché oggi JavaScript è necessario per tutti ... guarda la mia risposta ... –
provare in questo modo:
<td><a href="..." style="display:block;"> </a></td>
Grazie per la risposta rapida ma
PS: Lo stile = "display: block" nell'elemento lo farà occupare tutto lo spazio all'interno di
sì, è il modo migliore ma hai dimenticato il problema di allineamento verticale! usando in questo modo non possiamo mettere il link esattamente al centro dell'elemento td ... provalo tu stesso ... con style = "display: block;" e senza style = "display: block;" Penso che forse il modo javascript sia migliore perché oggi javascript è necessario per tutti ... –
Ecco la mia soluzione:.
<td>
<a href="/yourURL"></a>
<div class="item-container">
<img class="icon" src="/iconURL" />
<p class="name">
SomeText
</p>
</div>
</td>
(LESS)
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 {
/*...*/
}
}
come non si può ancora beneficiare di alcune proprietà delle cellule tavolo come vertical-align (Testato su Chrome)
Questo tipo di opere funziona, ma quando sposto il cursore sulla cella si alterna tra un puntatore e una mano . – Hawkee
a mio parere la patch non è un buon modo –
Facile con funzione onclick e collegamento javascript:
<td onclick="location.href='yourpage.html'">go to yourpage</td>
Quando si usano le altre risposte, il collegamento non occupa necessariamente tutto lo spazio nell'elemento '
Anche questo non crea un vero collegamento ipertestuale, quindi, ad esempio, la destinazione del collegamento non viene visualizzata nella parte inferiore della vista in Chrome e non è possibile fare Ctrl-clic per aprire la destinazione in una nuova scheda, ecc. – ChrisFox
Ho anche cercato una soluzione, e appena trovato questo codice su un altro sito:
<td style="cursor:pointer" onclick="location.href='mylink.html'">link</td>
Questo non è è un'ottima soluzione perché usa JavaScript dove è disponibile una semplice soluzione HTML. Ciò renderebbe il link non modificabile per gli utenti senza JavaScript. – Zaz
Grazie a Christ, mi hai dato un suggerimento. – Jaikrat
@Zaz: Oggi JavaScript è necessario per tutti ... è in ogni dove anche in un vecchio smartphone ... ed è abilitato di default –
Problemi:
(User: Kamal) E 'una buona modo, ma hai dimenticato il problema di allineamento verticale! usando in questo modo, non possiamo mettere il collegamento esattamente al centro dell'elemento TD! anche con allineamento verticale: medio;
(Utente: Christ) La tua risposta è la migliore risposta, perché non c'è alcun problema di allineamento e anche oggi JavaScript è necessario per tutti ... è in ogni dove anche in un vecchio smartphone ... ed è abilitare di default ...
Il mio suggerimento per completare risposta (User: Cristo):
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;
}
Perché non combinare il metodo onclick con l'elemento <a> all'interno del <td> per il backup per i non-JS? Sembra funzionare bene.
<td onclick="location.href='yourpage.html'"><a href="yourpage.html">Link</a></td>
Ho visto questo prima quando le persone stanno cercando di costruire un calendario. Vuoi che la cella sia collegata, ma non vuoi confondere qualcos'altro al suo interno, prova questo e potrebbe risolvere il tuo problema.
<tr>
<td onClick="location.href='http://www.stackoverflow.com';">
Cell content goes here
</td>
</tr>
replica di http://stackoverflow.com/questions/3337914/how-to-make-a-td-a-link – Usman
già discusso. La risposta è qui: http://stackoverflow.com/a/3966257/1320588 Saluti. – sleepwalker
@vaichidrewar puoi votare per chiudere una domanda come duplicato di un'altra domanda ora che hai più di 3000 reputazione. –