jak włączyć cały <tr> pod linkiem

Mam następujący kod:jak włączyć cały <tr> pod linkiem

<table> 
<tr> 
    <td><a href="#">some text</a></td> 
    <td>some more text</td> 
</tr> 
</table>

Próbuję włączyć cały wiersz tej tabeli w hiperłącze, jednak nie chcę używać myszy JavaScript wydarzenie, ponieważ nie mogę korzystać z JavaScript. Próbowałem używać CSS, ale znalazłem tylko sposoby, aby uczynić osobę w hiperlink, przechodząc: a href style="display block;", czy ktoś zna sposób css, aby cały wiersz w hiperłącze?

Źródło

2011-04-26 mickwaffle

Może jesteś ograniczony do korzystania z Javy, ale co z JavaScript? – BoltClock

yes javascript sorry – mickwaffle

Nie, nie można zmienić elementu/pola w klikalny element/pole z łączami za pomocą tylko CSS. Będziesz musiał umieścić ANCHOR w każdym nagłówku/komórce w TR (i ustawić ANCHOR na display: block, aby cała komórka była klikalna), lub użyć Javascript, aby twoje TR lub TR TH/TD były klikalne/followable do przeglądarki.

Przykład (podejścia ANCHOR):

http://jsfiddle.net/userdude/V9kj5/1/

tr a { 
    display: block; 
} 
tr td { 
    border: 1px solid #ddd; 
    width: 200px; 
} 

<table> 
<tr> 
    <td><a href="http://www.google.com" target="_google">some text</a></td> 
    <td>some more text</td> 
</tr> 
<tr> 
    <td><a href="http://www.google.com" target="_google">some text</a></td> 
    <td><a href="http://www.google.com" target="_google">some more text</a></td> 
</tr> 
</table>

Źródło

2011-04-26 00:49:45

To nie powoduje rozciągnięcia linku do pełnej wysokości komórki, zobacz mój widelec twojego skrzypka: http://jsfiddle.net/timbuethe/BsKz8/ –

Nie widzę żadnej różnicy między twoją a moją, więc Zakładam, że nie zapisałeś po wprowadzeniu zmian? –

Moja zła, wypróbuj tę: http://jsfiddle.net/BsKz8/2/ –

CSS określa prezentację na stronie, podczas gdy hiperłącza określić funkcjonalność. Nie, nie możesz użyć CSS, aby cały wiersz aktu stał się kotwicą. Będziesz musiał użyć JavaScript.

Źródło

2011-04-26 00:55:43 Phrogz

Moja ogólna reakcja to stwierdzenie, że nie możesz, ale możesz zrobić pierwsze łącze bardzo szerokim i bezwzględnie ustawić je tak, aby jego obszar działania obejmował drugą komórkę tekstową. Jednak druga komórka tekstowa nie będzie miała innej stylizacji łącza. Musisz także określić szerokość pierwszej komórki, aby nie zwinąć z powodu bezwzględnie umieszczonego linku wewnątrz.

See example →

<table> 
    <tr> 
     <td width="100"><a href="#">some text</a></td> 
     <td>some more text</td> 
    </tr> 
</table> 

tr { 
    position:relative; 
} 

tr a { 
    display:block; 
    width:98%; 
    position:absolute; top:10px; left:10px; z-index:10; 
}

Źródło

2011-04-26 00:58:13 mVChr

@mVChr - Bluźnierstwo! –

@mVChr - Musisz wziąć pod uwagę wiele linii: http://jsfiddle.net/userdude/UkW2p/1/ Może 'position: relative'? –

Zgadzam się, ale chciałem zaproponować rozwiązanie, jeśli nie był w stanie lub miał ograniczony dostęp do modyfikowania rzeczywistego kodu HTML. – mVChr

Co można zrobić, modulo HTML parser niesamowitość jest dokonanie <a href> w wierszu tabeli, ustawiając go display: table-row. Ale wtedy będziesz musiał radzić sobie z parserami HTML naprawiającymi <td> wewnątrz ciebie. Jeśli twoja strona to XHTML, to działa bardzo łatwo.

Źródło

2011-04-26 02:13:29

Choć bardzo podobna do odpowiedzi @Jared Farisha, ten konfiguracja powinna kotwica potrwać całą komórkę:

td a { 

    display: inline-block; 
    height:100%; 
    width:100% 

}

http://jsfiddle.net/NAfC5/2/

Źródło

2013-06-20 19:32:02 CodeXomby

jak włączyć cały <tr> pod linkiem

Odpowiedz

Powiązane problemy