Skip to content Skip to sidebar Skip to footer
Home / Css / Html Table / Jquery

HTML TD Clickable

Post a Comment
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"

Menu Halaman Statis