Tạo liên kết trong ô bảng điền toàn bộ chiều cao hàng

Tôi có một bảng dữ liệu và mỗi ô là một liên kết. Tôi muốn cho phép người dùng nhấp vào bất kỳ đâu trong ô bảng và yêu cầu họ theo liên kết. Đôi khi các ô của bảng có nhiều hơn một dòng nhưng không phải lúc nào cũng vậy. Tôi sử dụng td a {display: block} để lấy liên kết để bao phủ phần lớn ô. Khi có một ô trong một hàng là hai dòng và các ô khác chỉ là một dòng thì một lớp lót không lấp đầy toàn bộ không gian dọc của hàng trong bảng. Dưới đây là HTML mẫu và bạn có thể nhìn thấy nó trong hành động ở đây http://www.jsfiddle.net/RXHuE/:Tạo liên kết trong ô bảng điền toàn bộ chiều cao hàng

<head> 
<style type="text/css"> 
    td {width: 200px} 
    td a {display: block; height:100%; width:100%;} 
    td a:hover {background-color: yellow;} 
</style> 
<title></title> 
</head> 
<body> 
<table> 
    <tbody> 
    <tr> 
     <td> 
     <a href="http://www.google.com/">Cell 1<br> 
     second line</a> 
     </td> 
     <td> 
     <a href="http://www.google.com/">Cell 2</a> 
     </td> 
     <td> 
     <a href="http://www.google.com/">Cell 3</a> 
     </td> 
     <td> 
     <a href="http://www.google.com/">Cell 4</a> 
     </td> 
    </tr> 
    </tbody> 
</table> 
</body>

Nguồn

2010-10-19 Brian Fisher

+1 Đó là lần đầu tiên tôi nghe nói về "display: table". –

Vâng, tôi đã thử sử dụng "display: inline-block", mà thực sự làm việc trong các trình duyệt Webkit nhưng không phải là firefox hoặc IE. Sau đó, tôi đọc rằng "hiển thị: bảng" là tương tự vì vậy tôi nghĩ rằng tôi sẽ cung cấp cho nó một thử và kết thúc đăng câu hỏi với điều đó. Tôi đã chỉnh sửa câu hỏi để sử dụng "display: block" vì đó là ý tưởng đầu tiên của tôi. –

Tôi gần như hỏi cùng một câu hỏi: http://stackoverflow.com/questions/9127274/how-to-strech-a-link-over-the-whole-cell –

Bạn cần một thay đổi nhỏ trong CSS của mình. Tạo tdheight:100%; hoạt động cho IE 8 và FF 3.6, nhưng nó không hoạt động đối với Chrome.

td { 
    width: 200px; 
    border: solid 1px green; 
    height: 100% 
} 
td a { 
    display: block; 
    height:100%; 
    width:100%; 
}

Nhưng làm height để 50px tác phẩm dành cho Chrome, thêm vào IE và FF

td { 
    width: 200px; 
    border: solid 1px green; 
    height: 50px 
} 
td a { 
    display: block; 
    height:100%; 
    width:100%; 
}

Edit:

Bạn đã đưa ra những giải pháp cho mình trong bài khác ở đây; đó là sử dụng display: inline-block;. này hoạt động khi kết hợp với giải pháp của tôi dành cho Chrome, FF3.6, IE8

td { 
    width: 200px; 
    border: solid 1px green; 
    height: 100%} 
td a { 
    display: inline-block; 
    height:100%; 
    width:100%; 
}

Cập nhật

Các mã sau đây được làm việc cho tôi trong IE8, FF3.6 và chrome.

CSS

td { 
    width: 200px; 
    border: solid 1px green; 
    height: 100%; 
} 
td a { 
    display: inline-block; 
    height:100%; 
    width:100%; 
} 
td a:hover { 
    background-color: yellow; 
}

HTML

<table> 
    <tbody> 
    <tr> 
     <td> 
     <a href="http://www.google.com/">Cell 1<br> 
     second line</a> 
     </td> 
     <td> 
     <a href="http://www.google.com/">Cell 2</a> 
     </td> 
     <td> 
     <a href="http://www.google.com/">Cell 3</a> 
     </td> 
     <td> 
     <a href="http://www.google.com/">Cell 4</a> 
     </td> 
    </tr> 
    </tbody> 
</table>

Ví dụ đẻ here

Nguồn

2010-10-19 07:50:55

Đề xuất tốt, tuy nhiên, tôi không muốn sửa chiều cao của ô. Về cơ bản, tôi đang hiển thị một bảng dữ liệu cho người dùng và đôi khi một hàng có một ô có nhiều dữ liệu khiến nó bị quấn nhưng đôi khi không có ô nào trong một hàng. –

@Gaurav: inline-block không hoạt động trong FF4 –

@Brian: Việc tạo chiều cao 100% cũng không khả thi đối với bạn? –

Bạn có thể sử dụng một chút javascript.

<td onclick="window.location='http://www.google.com/'"> 
    <a href="http://www.google.com/">Cell 3</a> 
    </td>

Hoặc bạn có thể tạo phần tử lấp đầy toàn bộ phần tử vô hình lớn của bạn.

<td> 
    <a href="http://www.google.com/"> 
     <div style="width:100%; height:100%;">Cell 1<br> 
     second line 
     </div> 
    </a> 
    </td>

Nguồn

2010-10-19 07:10:25

Tôi bị cám dỗ bỏ phiếu này xuống. Chỉ vì bạn * có thể * làm điều gì đó không có nghĩa là * tốt * để làm điều đó :-) –

Chỉ vì bạn có thể bỏ phiếu này xuống, không có nghĩa là nó tốt :) Trong khi sử dụng liên kết javascript có thể can thiệp với SEO, có đã có một liên kết html tốt đẹp ở đó; Ngoài ra, với một trình duyệt không hỗ trợ javascript, sẽ có một sự mất mát rất nhỏ về chức năng. –

Đề xuất thứ hai của bạn không tốt hơn: HTML không cho phép lồng các phần tử khối bên trong các phần tử nội tuyến. Trình duyệt sẽ cố gắng làm cho tinh thần của nó, nhưng trong trường hợp này, div sẽ nhận được kích thước từ liên kết (mà không điền vào các tế bào). –

Hãy thử display: block:

td a {display: block; height:100%;}

[EDIT] WTF ... Tôi có thể khẳng định điều này không hoạt động trong FF 4 và Chrome. Công trình này:

td a {display: block; height: 2.5em; border: 1px solid red;}

Điều đó cho thấy rằng height:100%; không được xác định trong ô bảng. Có lẽ điều này là bởi vì các tế bào được kích thước của nó từ nội dung (vì vậy nội dung không thể nói "cho tôi biết kích thước của bạn" bởi vì điều đó sẽ dẫn đến một vòng lặp). Nó thậm chí không hoạt động nếu bạn đặt chiều cao cho các ô như sau:

td {width: 200px; height: 3em; padding: 0px}

Một lần nữa mã ở trên sẽ không thành công. Vì vậy, đề xuất của tôi là sử dụng chiều cao được xác định cho các liên kết (bạn có thể bỏ qua chiều rộng; đó là 100% theo mặc định cho các phần tử khối).

[EDIT2] Tôi đã nhấp qua một trăm ví dụ tại http://www.cssplay.co.uk/menus/ nhưng không có mẫu nào trong số đó kết hợp các ô đơn dòng và nhiều dòng. Có vẻ như bạn đã đánh một điểm mù.

Nguồn

2010-10-19 07:10:58

Cảm ơn bạn đã đề xuất. Đó là thực sự những gì tôi đã thử đầu tiên và tôi đã thay đổi mã trong bài viết của tôi để sử dụng nó. Điều đó cho phép liên kết chiếm toàn bộ không gian ngang của ô bảng, chứ không phải theo chiều dọc. –

@ Fisher Fisher: Sau đó, một cái gì đó khác là sai. Thêm một đường viền xung quanh các ô của bảng và các liên kết để xem chúng lớn như thế nào. Nếu liên kết là phần tử duy nhất trong ô và ô không có đệm, vv 'chiều cao: 100%;' nên thực hiện thủ thuật. –

@Brian: Hoặc để đặt theo cách khác: Ô sẽ nhận được chiều cao từ liên kết trong mã ở trên, vì vậy bạn không bao giờ có bất kỳ không gian nào bên ngoài liên kết. –

tôi sẽ gửi câu trả lời tương tự ở đây, như tôi đã làm trên my own question.

Lấy cảm hứng từ Jannis M 's answer, tôi đã làm như sau: (?)

$(document).ready(function(){  
    $('table tr').each(function(){ 
     var $row = $(this); 
     var height = $row.height(); 
     $row.find('a').css('height', height).append('&nbsp;'); 
    });  
});

Tôi đã thêm một   kể từ khi liên kết rỗng (không chứa các nút văn bản) không thể theo kiểu.

Xem cập nhật của tôi fiddle.

Nguồn

2012-02-06 11:30:17

Bạn nên xem câu trả lời của Gaurav Saxena, đây là giải pháp CSS duy nhất hoạt động tốt trên tất cả các trình duyệt hiện tại. –

Chỉ có vấn đề ở đây là sử dụng display: block buộc trình duyệt bỏ qua căn chỉnh dọc: center ...

oops.

Tôi ban giám khảo đã gian lận nó để tìm kiếm một ô có chiều cao: 60 và phông chữ chiếm 20 pixel bằng cách thêm br ... Sau đó, tôi nhận ra rằng tôi có một số mục có văn bản 2 dòng. Dang.

Tôi đã kết thúc bằng cách sử dụng javascript. Các javascript không cung cấp cho các clicky clicky đẹp điều, nhưng dòng văn bản nào, vì vậy nó sẽ thực sự kích hoạt một phản ứng trực quan, chỉ cần không phải nơi tôi muốn nó ... Sau đó, Javascript sẽ bắt tất cả các nhấp chuột mà 'bỏ lỡ 'href thực tế.

Có lẽ không phải là giải pháp thanh lịch nhất, nhưng nó hoạt động đủ tốt ngay bây giờ.

Bây giờ nếu tôi chỉ có thể tìm ra cách để làm điều này một cách đúng đắn ....

Bất kỳ ý tưởng về làm thế nào để thêm sự thay đổi biểu tượng chuột để một bàn tay đối với khu vực thuộc phạm vi onclick? Ngay bây giờ, nhấp để trang hoạt động, nhưng biểu tượng chỉ thay đổi khi nó chạm vào href chỉ ảnh hưởng đến văn bản.

Nguồn

2013-03-16 09:31:26 JimmyDee

Đặt lề âm lớn tùy ý và đệm bằng nhau trên phần tử khối và tràn bị ẩn trên phụ huynh.

td { 
    overflow: hidden; 
} 
td a { 
    display: block; 
    margin: -10em; 
    padding: 10em; 
}

http://jsfiddle.net/RXHuE/213/

Nguồn

2013-04-04 01:31:32 zobier

+10

Đây là câu trả lời, nó hoạt động tuyệt vời. –

Tôi thích cái này. Tôi không sử dụng JS. – mikato

Hoạt động tốt trong Firefox hiện tại (27), Chrome (33) và IE (11). – Alex

Tiếp theo công trình tấn công [Tested trên Chrome/Firefox/Safari] Có đệm tương tự cho td và neo yếu tố. Và đối với neo cũng có lề bằng với -giá trị padding.

HTML

<table> 
    <tr> 
     <td><a>Hello</a></td> 
    </tr> 
</table>

CSS:

td {       
    background-color: yellow;                    
    padding: 10px;                            
} 
a { 
    cursor:pointer; 
    display:block; 
    padding: 10px; 
    margin: -10px; 
}

Working Fiddle: http://jsfiddle.net/JasYz/

Nguồn

2013-04-11 22:32:52 vaichidrewar

-1

Tại sao bạn không chỉ thoát khỏi những <a> altogheter và thêm một onClick để <td> trực tiếp?

<head> 
<style type="text/css"> 
td { 
    text-align:center; 
} 
td:hover { 
    cursor:pointer; 
    color:#F00; 
} 
</style> 
<title></title> 
</head> 
<body> 
<table> 
    <tbody> 
     <tr> 
      <td onclick="location.href='http://www.google.com/';">Cell 1<br />second line</td> 
      <td onclick="location.href='http://www.google.com/';">Cell 2</a></td> 
      <td onclick="location.href='http://www.google.com/';">Cell 3</td> 
      <td onclick="location.href='www.google.com';">Cell 4</td> 
     </tr> 
    </tbody> 
</table>

Bằng cách này bạn cắt ra người đàn ông trung.

PS: tôi biết điều này đã được hỏi và trả lời nhiều năm trước, nhưng không có câu trả lời nào ở trên giải quyết được vấn đề trong trường hợp của tôi. Hy vọng điều này sẽ giúp một ai đó.

Nguồn

2015-09-04 08:35:53

-1

Đối với tôi, giải pháp duy nhất là thay thế <table><tr> với <div> s và phong cách họ sử dụng display:table và display:table-row cho phù hợp.

Sau đó, bạn có thể thay thế <td> chỉ với <a> và tạo kiểu với display:table-cell.

Làm việc hoàn hảo ngay cả trên các độ cao khác nhau của nội dung <td>.

html nên ban đầu mà không neo:

<table> 
    <tr> 
    <td>content1<br>another_line</td> 
    <td>content2</td> 
    </tr> 
</table>

lúc này là:

a:hover 
 
{ 
 
    background-color:#ccc; 
 
}

<div style="display:table; width:100%"> 
 
     <div style="display:table-row"> 
 
     <a href="#" style="display:table-cell; border:solid 1px #f00">content1<br>another_line</a> 
 
     <a href="#" style="display:table-cell; border:solid 1px #f00">content2</a> 
 
     </div> 
 
    </div>

Nguồn

2016-04-28 08:51:48 Anonymous

Ít muộn để đảng, nhưng có một giải pháp tốt đẹp tôi chỉ phát hiện.

Bạn có thể sử dụng kết hợp các yếu tố vị trí tương đối và tuyệt đối, cùng với phần tử giả để có được hiệu quả mà bạn đang thực hiện. Không cần đánh dấu thêm!

Thay đổi ô trong bảng (<td>), để được position: relative;, và tạo ra một yếu tố ::before hoặc ::after giả trên thẻ <a>, và đặt nó vào position: absolute;, và cũng có thể sử dụng top: 0; left: 0; right: 0; bottom: 0;.

Vì phần tử giả được gắn vào thẻ neo và bạn đang yêu cầu nó chiếm toàn bộ ô bảng, nó sẽ buộc thẻ neo ít nhất là kích thước đó, trong khi không ảnh hưởng đến nội dung thực tế của chính thẻ neo (do đó duy trì sự liên kết trung tâm của nó).

Ví dụ

HTML:

<table> 
    <tr> 
    <td> 
     <a>I'm centralised</a> 
    </td> 
    <td> 
     <a>I'm 100% width</a> 
    </td> 
    <td> 
     <a>AND I'm 100% height</a> 
    </td> 
    <td> 
     <a>WITHOUT extra markup</a> 
    </td> 
    <td> 
     <a>OR JavaScript!</a> 
    </td> 
    </tr> 
</table>

CSS:

table { 
    border-collapse: collapse; 
    table-layout: fixed; 
} 
td { 
    position: relative; 
    width: 150px; 
    border: 2px solid red; 
} 
td a { 
    padding: 0.5em 1em; 
} 
td a::after { 
    content: ''; 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
}

Hope this helps!

Nguồn

2017-09-03 12:54:52

Điều này dường như kéo dài vùng có thể nhấp nhưng không mở rộng màu nền: https://i.imgur.com/NDO61sV.png – mpen

Áp dụng màu nền cho phần tử sau quá ... 'td a, td a: sau {background-color: red; } ' –

Tạo liên kết trong ô bảng điền toàn bộ chiều cao hàng

Trả lời

Các vấn đề liên quan