[FIXED] How to Make Clickable <td>

Issue

I know there are many posts about this already, but I just can't get this to work. All I want to do is have a full <td> be clickable. I have a PHP loop that is generating this table and a simple piece of it is below.

<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>

All I really need is the CSS to make the class "clickable" actually be clickable. Right now it's....

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

Changing display to block not only messes up the formatting, but it also doesn't actually make the cell clickable. It changes the cursor to the pointer hand on hover, but the actual clicking to go to a website doesn't work.

Solution

u should never use the table tags instead use the css ,here is the answer to ur question

HTML

<div class="table" id="reservation_table">      
  <div class="row">
    <p></p>
    <p>Dec. 18</p>
    <p>Dec. 20</p>
    <p>Dec. 21</p>
  </div>
  <div class="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>
  </div>
  <div class="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>
  </div>
</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;
}

Answered By - ctf0

Answer Checked By - Cary Denson (PHPFixing Admin)