How to make entire table cell clickable when it has a hyperlink - using bootstrap v3

问题

This is how i am trying but it does not work

The only thing is, it gets 100% width equal to table cell width but the height does not change. How can i make the entire table cell clickable?

Here what i do

  <td><a href="Default.aspx?ClusterId=1" class="btn-full">click here</a></td>

And this is inside my CSS file

    .btn-full {
    display: block;
    width: 100%;
    height: 100%;
}

The bootstrap version i use is v 3.3.6

I am testing with latest version chrome : Version 51.0.2704.106 m

回答1:

In your case, since other td in same row has more content, you need to make all your td contents as equal height. Below code should work for above issue.

td{overflow:hidden;
   .btn-full {
    display: block;
    width: 100%;
    height: 100%;
    margin:-1000px;
    padding: 1000px;
}

回答2:

Try this

 
td a{
      width:100%;
      line-height:40px;
      display:inline-block;
      vertical-align:middle;
}

<table border="1">
  <tr>
    <td>heading 1</td>
    <td>heading 2 with extra space</td>
    <td>heading 3</td>
    <td>heading 4</td>
  </tr>
  <tr>
    <td>one</td>
    <td><a href="#">Two</a></td>
    <td>three</td>
    <td>four</td>
  </tr>
  <tr>
    <td>one</td>
    <td><a href="#">Two</a></td>
    <td>three</td>
    <td>four</td>
  </tr>
</table>

回答3:

Possible with this.

td{
  position:relative;
}
td a{
  display: block;
  text-align: center;
  padding: 10em;
  margin: -10em;
}

<table border="1">
  <tr>
    <td>this is heading of cell 1</td>
    <td>this is heading of cell 2</td>
    <td>this is heading of cell 3</td>
    <td>this is heading of cell 4</td>
  </tr>
  <tr>
    <td>one<br>one</td>
    <td><a href="#">Two</a></td>
    <td>three</td>
    <td>four</td>
  </tr>
  <tr>
    <td>one</td>
    <td><a href="#">Two</a></td>
    <td>three</td>
    <td>four</td>
  </tr>
  <tr>
    <td>one</td>
    <td><a href="#">Two</a></td>
    <td>three</td>
    <td>four</td>
  </tr>
  <tr>
    <td>one</td>
    <td><a href="#">Two</a></td>
    <td>three</td>
    <td>four</td>
  </tr>
  <tr>
    <td>one</td>
    <td><a href="#">Two</a></td>
    <td>three</td>
    <td>four</td>
  </tr>
  <tr>
    <td>one</td>
    <td><a href="#">Two</a></td>
    <td>three</td>
    <td>four</td>
  </tr>
  <tr>
    <td>one</td>
    <td><a href="#">Two</a></td>
    <td>three</td>
    <td>four</td>
  </tr>
</table>

来源：https://stackoverflow.com/questions/38097604/how-to-make-entire-table-cell-clickable-when-it-has-a-hyperlink-using-bootstra

标签

html

css

twitter-bootstrap

hyperlink

html-table