cách tạo một ô liên kết bảng

Question

Làm thế nào để toàn bộ ô bảng được siêu liên kết trong html mà không có javascript hoặc jquery?

Tôi cố gắng để đưa href trong td thẻ bản thân nhưng nó không làm việc ít nhất là trong chrome 18

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

Answer 1

Hãy thử điều này:

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

Tôi hy vọng nó sẽ hoạt động tốt.

Answer 2

Hãy thử cách này:

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

Answer 3

Đây là giải pháp của tôi:.

<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 { 
     /*...*/ 
    } 
} 

Như thế này bạn vẫn có thể được hưởng lợi từ một số tính chất ô trong bảng như vertical-align (Thử nghiệm trên Chrome)

Answer 4

dễ dàng với chức năng onclick-function và liên kết javascript:

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

Answer 5

Tôi cũng đã được tìm kiếm một giải pháp, và chỉ tìm thấy mã này trên một trang web khác:

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

Answer 6

vấn đề:

(User: Kamal) Đó là một tốt nhưng bạn quên vấn đề căn chỉnh dọc! bằng cách này, chúng tôi không thể đặt liên kết chính xác ở giữa phần tử TD! ngay cả với dọc-align: trung;

(Người dùng: Christ) Câu trả lời của bạn là câu trả lời hay nhất, bởi vì không có vấn đề gì liên quan và ngày nay JavaScript là cần thiết cho mỗi ... nó ở mọi nơi ngay cả trong điện thoại thông minh ... và nó cho phép theo mặc định ...

Đề nghị của tôi để hoàn thành câu trả lời của (Thành viên: Đấng 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; 
} 

Answer 7

Tại sao không kết hợp các phương pháp onclick với các yếu tố bên trong <a><td> để sao lưu cho người không JS? Dường như làm việc tuyệt vời.

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

Answer 8

Tôi đã thấy điều này trước khi mọi người đang cố gắng xây dựng lịch. Bạn muốn các tế bào liên kết nhưng không muốn gây rối với bất cứ điều gì khác bên trong của nó, hãy thử điều này và nó có thể giải quyết vấn đề của bạn.

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