W jaki sposób cała komórka tabeli może być hiperlinkowana w html bez javascript lub jquery?jak utworzyć komórkę z hiperłączem do tabeli
próbowałem umieścić href w sobie, ale jej nie działa przynajmniej w chromie td tag 18
<td href='http://www.m-w.com/dictionary/' style="cursor:pointer">
Spróbuj:
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;
}
Mam nadzieję, że zadziała.
tak, to najlepszy sposób, ale zapomniałeś o pionowym wyrównaniu problemu! używając tego sposobu nie możemy umieścić linku dokładnie w środku elementu td ... przetestuj go sam ... ze stylem = "display: block;" i bez stylu = "display: block;" Myślę, że może sposób JavaScript jest lepszy, ponieważ dziś JavaScript jest niezbędny dla każdego ... spójrz na moją odpowiedź ... –
Spróbuj w ten sposób:
<td><a href="..." style="display:block;"> </a></td>
Dziękuję za szybką odpowiedź, ale
PS: Styl = "display: block" w elemencie spowoduje, że zajmie całą przestrzeń wewnątrz
tak, to najlepszy sposób, ale zapomniałeś o pionowym wyrównaniu problemu! używając tego sposobu nie możemy umieścić linku dokładnie w środku elementu td ... przetestuj go sam ... ze stylem = "display: block;" i bez stylu = "display: block;" Myślę, że może sposób javascript jest lepszy, ponieważ dzisiaj javascript jest niezbędny dla każdego ... –
Oto moje rozwiązanie.
<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 {
/*...*/
}
}
Jak to nadal można korzystać z niektórych właściwości komórek tabeli jak vertical-align (Testowane na Chrome)
Ten rodzaj prac, ale gdy poruszam kursorem nad komórką, zmienia się on pomiędzy wskaźnikiem i ręką . – Hawkee
Moim zdaniem łata nie jest dobrym sposobem. –
Łatwy za pomocą funkcji onclick i łącza javascript:
<td onclick="location.href='yourpage.html'">go to yourpage</td>
Podczas korzystania z innych odpowiedzi, link niekoniecznie zajmuje całą przestrzeń w elemencie '
To również nie tworzy prawdziwego hiperłącza, więc na przykład miejsce docelowe linku nie pojawia się u dołu widoku w przeglądarce Chrome i nie można kliknąć z wciśniętym klawiszem Ctrl, aby otworzyć miejsce docelowe w nowej karcie itp. – ChrisFox
Mam również poszukuje rozwiązania problemu, a tylko znaleźć ten kod na innej stronie:
<td style="cursor:pointer" onclick="location.href='mylink.html'">link</td>
To nie jest " t bardzo dobre rozwiązanie, ponieważ używa JavaScript, w którym dostępne jest zwykłe rozwiązanie HTML. To sprawi, że link będzie niemożliwy dla użytkowników bez JavaScript. – Zaz
Dzięki @Christ, dałeś mi wskazówkę. – Jaikrat
@Zaz: Dziś JavaScript jest niezbędny dla każdego ... jest w każdym miejscu nawet w starym smartfonie ... i jest domyślnie włączony –
problemy:
(User: Kamal) To dobry sposób, ale zapomniałeś o pionowym wyrównaniu problemu! używając tego sposobu, nie możemy umieścić linku dokładnie w środku elementu TD! nawet z pionowym wyrównaniem: środek;
(Użytkownik: Chrystus) Twoja odpowiedź jest najlepszą odpowiedzią, ponieważ nie ma żadnego problemu wyrównania, a także dzisiaj JavaScript jest niezbędny dla każdego ... jest w każdym miejscu nawet w starym smartfonie ... a to umożliwi domyślnie ...
moja propozycja, aby zakończyć odpowiedź (użytkownik: Christ):
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;
}
Dlaczego nie połączyć metodę onclick z elementem <a> wewnątrz <td> do tworzenia kopii zapasowych dla non-JS? Wydaje się działać świetnie.
<td onclick="location.href='yourpage.html'"><a href="yourpage.html">Link</a></td>
Widziałem to wcześniej, kiedy ludzie próbują zbudować kalendarz. Chcesz, aby ta komórka była połączona, ale nie chcesz się z nią mieszać, spróbuj tego i może rozwiązać Twój problem.
<tr>
<td onClick="location.href='http://www.stackoverflow.com';">
Cell content goes here
</td>
</tr>
replika http://stackoverflow.com/questions/3337914/how-to-make-a-td-a-link – Usman
już omówione. Odpowiedź jest tutaj: http://stackoverflow.com/a/3966257/1320588 Pozdrawiam. – sleepwalker
@vaichidrewar możesz głosować, aby zamknąć pytanie jako duplikat innego pytania, gdy masz ponad 3000 punktów reputacji. –