HTML TD Clickable

Question

У меня есть меню, которое вы можете увидеть справа вверху - www.balibar.co

HTML:

    <div id="joinHeader" class="shadow">
            <table id="indexNavigation"><tr>
                <td><a id="navSearch">Search</a></td>
                <td><a id="navLanguages">Languages</a></td>
                <td id="activeNavLink"><a id="navLogin">Login</a></td>
            </tr></table>
    </div>

CSS:

 table#indexNavigation {
width: 100%;
height: 25px;
font-weight: normal;
font-size: 1.1em;
border-collapse: collapse;
 }

 table#indexNavigation td {
text-align: center;
color: white;
width: 33.33%;
border-right: 1px solid #FFF;
cursor: pointer;
 }

table#indexNavigation td#activeNavLink {
border-right: none;
 }

Я хочу сделать весь ТД кликабельным.Я добавил курсор: указатель;к TD, но он не загорается, за исключением случаев, когда над словами.Я попытался поместить <a> вне <td>, но это не сработало.

Есть хитрость, чтобы сделать это кликабельным.Затем подключит это к jQuery для события щелчка - например:

 $('td#activeNavLink').click(function() {

Answer 1

Просто сделайте ваши ссылки внутри ваших td тегов шириной 100%. Тогда они займут всю ширину ячейки.

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

Answer 2

у вас есть два варианта

1. только по css

   здесь вы фактически делаете тег привязки блок-элементом, задаете его полную ширину и высоту, чтобы сделать его таким же большим, как ячейка таблицы ...

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

   примечание вам может понадобиться переместить некоторые отступы и тому подобное из элемента TD в элемент A

2. по javascript

   это означает, что добавляется событие щелчка к элементу td, а затем запускается щелчок по элементу привязки, который находится внутри этой ячейки таблицы.

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

Answer 3

Вы должны использовать display:block в своем CSS.

Вот пример из неупорядоченного списка (ul) с блок-ссылками: ссылка