Как сделать Clickable <td>

Question

Я знаю, что есть много сообщений об этом уже, но я просто не могу заставить это работать. Все, что я хочу сделать, это иметь полный доступ к <td>. У меня есть цикл PHP, который генерирует эту таблицу, и простая часть этого ниже.

<table id="reservation_table" style="border-collapse: collapse; border: 1px solid; padding: 5px;">  
    <tr> 
    <th style="border: 1px solid; padding: 5px;"></th> 
    <th style="border: 1px solid; padding: 5px;">Dec. 18</th> 
    <th style="border: 1px solid; padding: 5px;">Dec. 20</th> 
    <th style="border: 1px solid; padding: 5px;">Dec. 21</th> 
    </tr> 
    <tr> 
    <td style="border: 1px solid; padding: 5px;" class="clickable">1:00-1:15</td> 
    <td id="1" style="border: 1px solid; padding: 5px;" class="clickable"><a href="http://somewhere.com">Reserve slot</a></td> 
    <td id="2" style="border: 1px solid; padding: 5px;" class="clickable"><a href="http://somewhere.com">Reserve slot</a></td> 
    <td id="3" style="border: 1px solid; padding: 5px;" class="clickable"><a href="http://somewhere.com">Reserve slot</a></td> 
    </tr> 
    <tr> 
    <td style="border: 1px solid; padding: 5px;">4:00-4:15</td> 
    <td id="28" style="border: 1px solid; padding: 5px;" class="clickable"><a href="http://somewhere.com">Reserve slot</a></td> 
    <td id="29" style="border: 1px solid; padding: 5px;" class="clickable"><a href="http://somewhere.com">Reserve slot</a></td> 
    <td id="30" style="border: 1px solid; padding: 5px;"><a href="http://somewhere.com">Reserve slot</a></td> 
    </tr> 
</table> 

Все, что мне действительно нужно, это CSS, чтобы сделать класс «clickable» действительно доступным для клика. Сейчас это ....

.clickable{ 
    display: table-cell; 
    height: 100%; 
} 

Изменение дисплея блокировать не только портит форматирование, но и на самом деле не делают кликабельным клеток. Он меняет курсор на указатель на зависании, но фактический щелчок для перехода на сайт не работает.

Answer 1

у никогда не должны использовать теги таблицы вместо этого использовать CSS, вот ответ на ур вопрос

HTML

<div class="table" id="reservation_table">  
    <row> 
    <p></p> 
    <p>Dec. 18</p> 
    <p>Dec. 20</p> 
    <p>Dec. 21</p> 
    </row> 
    <row> 
    <p>1:00-1:15</p> 
    <a href="http://somewhere.com">Reserve slot</a> 
    <a href="http://somewhere.com">Reserve slot</a> 
    <a href="http://somewhere.com">Reserve slot</a> 
    </row> 
    <row> 
    <p>4:00-4:15</p> 
    <a href="http://somewhere.com">Reserve slot</a> 
    <a href="http://somewhere.com">Reserve slot</a> 
    <a href="http://somewhere.com">Reserve slot</a> 
    </row> 
</div> 

CSS

.table { 
    display: table; 
    border: 1px solid; 
    padding: 5px; 
} 

row { 
    display: table-row; 
} 

a,p { 
    background: yellow; // for demonstration 
    max-width: 100%; 
    height: 100%; 
    display: table-cell; 
    border: 1px solid; 
    padding: 5px; 
    text-align: center; 
} 

Answer 2

Вы должны убедиться, что <a> внутри clickable заполняет весь td

.clickable a { 
    width: 100%; 
    margin: 0; 
} 

Answer 3

Если вы хотите, полные элементы тд действуют как ссылки, вы, вероятно, следует сделать this.It сделает всю TD кликабельным с использованием некоторых простых javascript.Here в качестве примера он изменит цвет фона тд красный при нажатии

var input=document.getElementsByTagName('td'); 
 
    for(i=0;i<input.length;i++){ 
 
     (function (i){ 
 
\t   input[i].addEventListener('click',function(e){ 
 
\t \t \t e.target.style.background='red'; 
 
\t \t \t }); 
 
\t })(i) 
 
    }

<table id="reservation_table" style="border-collapse: collapse; border: 1px solid; padding: 5px;">  
 

 
    <tr> 
 
    <td style="border: 1px solid; padding: 5px;" ><a href='http://somewhere.com'>1:00-1:15</a></td> 
 
    </tr> 
 
</table>