Home/ Questions/Q 6655013
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T01:27:40+00:00

In the following example, the word Test is not clickable in Internet Explorer, even

  • 0

In the following example, the word Test is not clickable in Internet Explorer, even though the link URL appears at the bottom of the page when it’s hovered over, and the link’s area is represented accurately in the horrible IE debugging tool (F12). This works fine in all other browsers (of course).

<a href="/"><table><tr><td>Test</td></tr></table></a>

I know it’s not technically valid to nest a table inside a hyperlink tag, but it’s really the only practical way to do what I want to accomplish, and seeing how it works fine in all browsers, is there a way to get it to work in IE?

So far, I’ve tried giving both the table and link a height, width, and also a display property of inline-block. None have worked. Thanks.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You say “seeing how it works fine in all browsers” — but that’s really not true. What’s actually happening in some browsers is they’re doing work to make it work.

    Do something like this instead:

    <table onclick="location.href='/'" style="cursor: hand;">
<tr><td>Test</td></tr>
</table>

    Also a hack, but a more valid one.

    UPDATE

    If you have concens about crawlers, there are two possible approaches. One is to add a link after, something like:

    <table onclick="location.href='/'" style="cursor: hand;">
<tr><td>Test</td></tr>
</table>
<a href="/" style="display:none;">Test</a>

    You can also use a <link> tag in the <head> of the document, something like:

    <link href="/" rel="section" />

    Or whatever link rel type makes sense.

    Additionally, HTML structured as you have in your question is invalid according to the spec. In terms of what works reliably and into the future, your code does not qualify. Code written more towards an eye on standards will work more reliably.

    ANOTHER UPDATE

    Given your comment, here’s how I would structure this, assuming markup like this:

    <table class="dataTable">
    <tr>
       <td><img></td>
       <td>Description</td>
       <td><a href="/" class="details">Details</a></td>
    </tr>
</table>

    Your details link represents the link you’re using, so what I would do is add this bit of JavaScript (uses jQuery, but could be rewritten for whatever libraries you’re currently using:

    <script>
jQuery(function($){
  $('table.dataTable').delegate('td', 'click', function(){
    $(this).find('a.details').trigger('click');
  });
});
</script>
    • 0