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

Question

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

@onedevteam.com tried still doesnt work :D https://i.snag.gy/uqIHT9.jpg — MonsterMMORPG, Jun 29 '16 at 11:27
@onedevteam.com just tried does not change here : https://i.snag.gy/ShWlQ2.jpg — MonsterMMORPG, Jun 29 '16 at 11:40

score 3 · Answer 1 · edited Sep 13 '18 at 19:05

3

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

edited Sep 13 '18 at 19:05

Undo

25,381
37
106
126

answered Jun 29 '16 at 11:12

San

281
1
8

but this can pretty much break responsiveness right? – MonsterMMORPG Jun 29 '16 at 11:13
It will not break responsiveness. It will act normally how a table works. Just that your td content will be of equal height. – San Jun 29 '16 at 11:22

Gaurav Aggarwal · Answer 2 · 2016-06-29T12:01:08.677

1

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>

edited Jun 29 '16 at 12:01

answered Jun 29 '16 at 11:11

Gaurav Aggarwal

9,397
5
31
69

well i still need to keep responsiveness in mobile experience. will this break it? – MonsterMMORPG Jun 29 '16 at 11:14
No it will not because `` is placed according to its `` and `` will be there in responsive also no matter about the size. – Gaurav Aggarwal Jun 29 '16 at 11:15
yes i just tried but this breaks vertical align middle :( – MonsterMMORPG Jun 29 '16 at 11:16
no i mean i want to display the text vertical alignment middle . here what happens : http://orig11.deviantart.net/8fcf/f/2016/181/f/f/aa_by_monstermmorpg-da86t7y.png – MonsterMMORPG Jun 29 '16 at 11:20
ty for updated answer. still only text part is clickable :D https://i.snag.gy/RtVHkQ.jpg if you run your snippet and analyze by chrome you will see the same :) – MonsterMMORPG Jun 29 '16 at 11:42

WitVault · Answer 3 · 2016-06-29T11:35:25.713

1

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>

edited Jun 29 '16 at 11:35

answered Jun 29 '16 at 11:20

WitVault

21,947
19
96
128

height is still same. i want height of the hyperlink to be same as table cell height – MonsterMMORPG Jun 29 '16 at 11:25
Updated the answer @MonsterMMORPG – WitVault Jun 29 '16 at 11:36

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

3 Answers3

Linked