Skip to content Skip to sidebar Skip to footer

HTML TD Clickable

I have a menu you can see on the top right hand side - www.balibar.co HTML:

Solution 1:

Just make your links inside your td tags have a width of 100%. Then they will take up the full width of the cell.

table#indexNavigation td a {
    display: block;
    width: 100%;
    text-align: center;
}

Solution 2:

You should use a display:block in your CSS.

Here's an example from an unordered list (ul) with block-links: link


Solution 3:

you have two options

  1. by css only

    here you actually make the anchor tag a block element, give it full width and height to make it as big as the table cell...

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

    remark you might need to move some paddings and such from the TD element to the A element

  2. by javascript

    this means, adding a click event to the td element, and then triggering the click from the anchor element that's inside that table cell.

    $('#mytable td').each(function(){
      $(this).css({'cursor': 'pointer'}).click(function(){
        $(this).find('a:first').trigger('click');
      });
    });
    

Post a Comment for "HTML TD Clickable"